如何减少 .then 在 JavaScript 中的使用？

Question

首先，很抱歉打字错误，葡萄牙语是我的主要语言，但我正在努力。我正在创建一个计时器，它每 500ms 更新一次并检查数字是否是 30 的倍数，这是一个测试代码，目前只有这个功能。问题是我用了太多 .then 并且代码变得难以辨认。编码：function startLiveUpdate() {  const timerURL = 'http://localhost:8000/jsons/data.json';  setInterval(function() {    fetch(timerURL).then(function(response) {      return response.json();    }).then(function(data) {      var gameTime = data.gameTime;      document.getElementById("timer").textContent = gameTime;      return gameTime;    }).catch(function(error) {      console.log(error);    }).then(function(gameTime) {      var timings = [        10,        20,        30,        40,        60,        70,        80,        90      ]      for (time of timings) {        if (gameTime < time) {          var nextTime = time;          if (nextTime % 30 == 0) {            document.getElementById("next").textContent = nextTime + ' MULTIPLO';            document.getElementById("cron").textContent = nextTime - gameTime;            console.log(nextTime);          } else {            document.getElementById("next").textContent = nextTime;            document.getElementById("cron").textContent = nextTime - gameTime;            console.log(nextTime);          }          break;        }      }    });  }, 1000);}我想知道是否有任何方法可以保留小功能，例如一个获取数据的方法，一个读取和理解数据的方法，另一个检查它是否为 30 的倍数的方法。我尝试过的所有方法，要么他们不不要每 500 毫秒更新一次，否则它们就不起作用

Answer 1

你会寻找Async/await！将它与 promises 一起使用而不是.then，它会让事情变得更加整洁！

Answer 2

正如已经提到的那样，没有那么多，.then只有 3 个，而且正如之前提到的，您可以将第二个和第三个结合起来。您还可以将您的逻辑代码调制为函数，特别是最后一个可以简化很多，因为它应该只在满足条件的情况下连接文本。

请看看这个例子

function startLiveUpdate() {

  const timerURL = "http://localhost:8000/jsons/data.json";

  setInterval(() => {

    fetch(timerURL)

      .then((response) => response.json())

      .then((data) => {

        setTimer(data.gameTime);

        check(data.gameTime);

      })

      .catch(function (error) {

        console.log(error);

      });

  }, 1000);

}

function setTimer(gameTime) {

  document.getElementById("timer").textContent = data.gameTime;

}

function check(gameTime) {

  var timings = [10, 20, 30, 40, 60, 70, 80, 90];

  for (time of timings) {

    if (gameTime < time) {

      const suffix = time % 30 === 0 ? " MULTIPLO" : "";

      document.getElementById("next").textContent = time + suffix;

      document.getElementById("cron").textContent = time - gameTime;

      break;

    }

  }

}

如果这还不够，试试 async 和 await使用 async 和 await 使异步编程更容易

Answer 3

您当前的代码可以稍微重构以提高可读性。您可以使用async/await，但浏览器支持会减少，除非您不喜欢 IE。

function getData() {

  const timerURL = 'http://localhost:8000/jsons/data.json';

  return fetch(timerURL).then(function(response) {

    return response.json();

  }).then(function(data) {

    var gameTime = data.gameTime;

    return gameTime;

  })

}

function startLiveUpdate() {

  

  setInterval(function() {

    getData().then(function(gameTime) {

      document.getElementById("timer").textContent = gameTime;

      var timings = [

        10,

        20,

        30,

        40,

        60,

        70,

        80,

        90

      ]

      for (time of timings) {

        if (gameTime < time) {

          var nextTime = time;

          if (nextTime % 30 == 0) {

            document.getElementById("next").textContent = nextTime + ' MULTIPLO';

            document.getElementById("cron").textContent = nextTime - gameTime;

            console.log(nextTime);

          } else {

            document.getElementById("next").textContent = nextTime;

            document.getElementById("cron").textContent = nextTime - gameTime;

            console.log(nextTime);

          }

          break;

        }

      }

    });

  }, 1000);

}

当然，如果您决定使用async/await，您的代码看起来会好得多：

const getData = async () => {

  const timerURL = 'http://localhost:8000/jsons/data.json';

  const response = await fetch(timerURL);

  const { gameTime } = await response.json();

  return gameTime;

}

function startLiveUpdate() {

  setInterval(async () => {

    let gameTime = null;

    try {

      gameTime = await getData();

    } catch (error) {

      console.log(error);

      return;

    }

    document.getElementById("timer").textContent = gameTime;

    var timings = [

      10,

      20,

      30,

      40,

      60,

      70,

      80,

      90

    ]

    for (time of timings) {

      if (gameTime < time) {

        var nextTime = time;

        if (nextTime % 30 == 0) {

          document.getElementById("next").textContent = nextTime + ' MULTIPLO';

          document.getElementById("cron").textContent = nextTime - gameTime;

          console.log(nextTime);

        } else {

          document.getElementById("next").textContent = nextTime;

          document.getElementById("cron").textContent = nextTime - gameTime;

          console.log(nextTime);

        }

        break;

      }

    }

  }, 1000);

}

Answer 4

第一步是一些清理，将catch错误处理程序移到最后，将两个同步合并then为一个并使用箭头函数：

function startLiveUpdate() {

  const timerURL = 'http://localhost:8000/jsons/data.json';

  setInterval(() => {

    fetch(timerURL).then(response =>

      response.json();

    ).then(data => {

      var gameTime = data.gameTime;

      document.getElementById("timer").textContent = gameTime;

      var timings = [10, 20, 30, 40, 60, 70, 80, 90];

      for (var nextTime of timings) {

        if (gameTime < nextTime) {

          if (nextTime % 30 == 0) {

            document.getElementById("next").textContent = nextTime + ' MULTIPLO';

          } else {

            document.getElementById("next").textContent = nextTime;

          }

          document.getElementById("cron").textContent = nextTime - gameTime;

          console.log(nextTime);

          break;

        }

      }

    }).catch(console.log);

  }, 1000);

}

您还可以使用async/await代替.then()语法：

function startLiveUpdate() {

  const timerURL = 'http://localhost:8000/jsons/data.json';

  setInterval(async () => {

    try {

      var response = await fetch(timerURL)

      var data = await response.json();

      var gameTime = data.gameTime;

      document.getElementById("timer").textContent = gameTime;

      var timings = [10, 20, 30, 40, 60, 70, 80, 90];

      for (var nextTime of timings) {

        if (gameTime < nextTime) {

          if (nextTime % 30 == 0) {

            document.getElementById("next").textContent = nextTime + ' MULTIPLO';

          } else {

            document.getElementById("next").textContent = nextTime;

          }

          document.getElementById("cron").textContent = nextTime - gameTime;

          console.log(nextTime);

          break;

        }

      }

    } catch(err) {

      console.log(err);

    }

  }, 1000);

}

Answer 5

你不需要你then()的大部分

// this doesn't need to be inline

// smaller chunks of code are easier to worry about. 

function setGameTime(data) {

  const gameTime = data.gameTime;

  document.getElementById("timer").textContent = gameTime;

  // condensed the two functions into one

  if (gameTime < 90) {

    const timings = [10, 20, 30, 40, 60, 70, 80, 90];

    const nextTime = timings.find(time => gameTime < time);

    // you could even compute `nextTime` as `10*Math.ceil(gameTime/10)`

    const suffix = time % 30 ? '' : ' MULTIPLO';

    document.getElementById("next").textContent = nextTime + suffix;

    document.getElementById("cron").textContent = nextTime - gameTime;

    console.log(nextTime);

  }

}

function startLiveUpdate() {

  const timerURL = 'http://localhost:8000/jsons/data.json';

  setInterval(function () {

    fetch(timerURL)

    // these are the two `then`s you can't avoid:

    .then(response => response.json())

    .then(

      setGameTime,

      console.log

    );

  }, 1000);

}

因为我总是很生气，所以.then(response => response.json())我通常会fetch()这样延伸：

/**

 * shorthands: fetch.json(input, ?init) 

 * for         fetch(input, ?init).then(response => response.json())

 */

["arrayBuffer","blob","formData","json","text"].forEach(method => {

  const handler = response => response[method]();

  fetch[method] = (input, init=void 0) => fetch(input, init).then(handler);

});

Answer 6

我认为 ES6 可以帮助您清理代码！

  function startLiveUpdate() {

  const timerURL = "http://localhost:8000/jsons/data.json";

  setInterval(() => {

    fetch(timerURL)

      .then((response) => response.json())

      .then((data) => {

        var gameTime = data.gameTime;

        document.getElementById("timer").textContent = gameTime;

        return gameTime;

      })

      .then((gameTime) => {

        var timings = [10, 20, 30, 40, 60, 70, 80, 90];

        for (time of timings) {

          if (gameTime < time) {

            var nextTime = time;

            if (nextTime % 30 == 0) {

              document.getElementById("next").textContent =

                nextTime + " MULTIPLO";

              document.getElementById("cron").textContent = nextTime - gameTime;

              console.log(nextTime);

            } else {

              document.getElementById("next").textContent = nextTime;

              document.getElementById("cron").textContent = nextTime - gameTime;

              console.log(nextTime);

            }

            break;

          }

        }

      })

      .catch((error) => console.log(error));

  }, 1000);

}