如何在 Javascript 中将 await 与 forEach 一起使用？ [复制]答案

【问题标题】：How to use await with forEach in Javascript? [duplicate]如何在 Javascript 中将 await 与 forEach 一起使用？ [复制]
【发布时间】：2022-01-13 19:40:32
【问题描述】：

我正在尝试将 PokeAPI 与 JS 一起使用。

我可以成功获取 Pokeman 信息并显示，但顺序不正确。

我使用了forEach 循环，并希望等到我添加第一个 Pokeman，然后添加第二个...

我发现了await，我尝试使用它，但我做不到。有人可以帮帮我吗？

这是我的 JS 代码：

var url = 'https://pokeapi.co/api/v2/pokemon/';

fetch(url)
  .then(function(response) {
    return response.json();
  })
  .then(function(response) {
    response.results.forEach(element => {
      var url = 'https://pokeapi.co/api/v2/pokemon/' + element.name;
      fetch(url)
        .then(function(response) {
          return response.json();
        })
        .then(function(response) {
          addPokemon(response.name, response.sprites.front_default, response.types[0].type.name, response.height, response.weight);
        })
    });
  })

【问题讨论】：

标签： javascript api loops foreach async-await

【解决方案1】：

您可以使用“for”循环代替 forEach。

for (let i = 0; i < length; i++) {
  const poke = await fetch(...);
}

【讨论】：

糟糕且缓慢的解决方案。

【解决方案2】：

Promise.all(response.results.map(...)).then(

【讨论】：

【解决方案3】：

看起来您使用的是 Promises，但不是 async/await 语法。

您可以将 forEach 与异步等待一起使用，因为代码可以以“看起来”同步的方式编写。

现在，您只是在 forEach 循环中一个接一个地执行多个 Promise。我可能会将 Promise 链接在一起，然后等待 Promise.all() 在它们全部实现后做一些有用的事情。

【讨论】：

【解决方案4】：

首先，为什么要使用双“.then()”子句？在第一个“.then()”子句中的每个“fetch()”之后，您返回响应，然后，在第二个“.fetch()”子句中，您使用相同的响应来操作相同的数据。首先删除不必要的“.then()”子句。其次，能否分享一下“addPokemon()”函数的内部部分？您声称数据以错误的顺序加载。我认为问题在于您将数据“添加”到某个未知数组的方式。请澄清这些观点。很可能，您的问题就在那里。

【讨论】：