JavaScript Fetch & Push 数组返回“未定义”

Question

我正在用纯 JavaScript 编写应用程序。我遇到了一个问题，当将 150 个对象放入数组时，数组中的一些对象是未定义的。当我在将对象推入数组之前对其进行 console.log 时，它们很好，并且所有 150 个对象都会显示。但是当我将它们推送到数组时，有些是未定义的，有些确实被成功推送了。我的理解是，这可能是序列问题的时间问题，对于某些对象，它们可能尚未完全获取，但推送到数组已经发生。有没有办法确保它们是有序的，以便只有在完全成功获取对象后才会推送数组？感谢您的帮助。

const fetchPokemon = function () {

  const pokemons = [];

  for ( let i=1; i <= 150; i++) {
      const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
      fetch(url).then( res => { return res.json(); })
      .then( data => {
          const pokemon = {
              name: data.name,
              id: data.id          
          };
          pokemons.push(pokemon);
          console.log(pokemon);
          console.log(pokemons[i]);
      });
  }
};

fetchPokemon();

输出 - 根据未定义的数组元素，页面的不同重新加载会有所不同

app.js:17 undefined
app.js:16 {name: "dragonite", id: 149}
app.js:17 undefined
app.js:16 {name: "mewtwo", id: 150}
app.js:17 undefined
app.js:16 {name: "kingler", id: 99}
app.js:17 {name: "electrode", id: 101}
app.js:16 {name: "aerodactyl", id: 142}
app.js:17 {name: "zapdos", id: 145}
app.js:16 {name: "dratini", id: 147}
app.js:17 {name: "kingler", id: 99}

Answer 1

您的问题是，虽然 fetch 对于每个单独的请求都是异步的，但您在所有 150 个请求完成之前返回。在下面的 for 循环中，不是链接到请求并立即推送，而是将 promise 推送到 requests 数组中。然后，在循环之后，您返回一个 Promise，一旦请求了所有 150 个 Promise 并将其推送到 pokemons 数组中，该 Promise 就会解析。

const fetchPokemon = function() {
  const pokemons = [];
  const requests = [];
  for (let i = 1; i <= 150; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    const prom = fetch(url).then((r) => r.json());

    requests.push(prom);
  }
  return new Promise((resolve) => {
    Promise.all(requests)
      .then((proms) =>
        proms.forEach((p) => pokemons.push({
          name: p.name,
          id: p.id
        }))
      )
      .then(() => resolve(pokemons));
  });
};

fetchPokemon().then(console.log);

Answer 2

在此处发布此内容，作为使用 async/await 的更简单、更简洁和最佳的示例。
并行提取，具有迭代第一个顺序就绪提取响应的特性。即：如果前 25 次获取完成，它将按顺序迭代前 25 次，而无需等待后 125 次。

const fetchPokemon = async function() {
  const pokemons = [];

  for (let i = 1; i <= 150; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    const data = fetch(url).then(res => res.json())
                           .then( ({name, id}) => ({name, id}) );
    pokemons.push(data);
  }
  for await (const pokemon of pokemons) {
    console.log(pokemon);
  }
  // or if you need to use the index:
  for (let i = 0; i < pokemons.length; i++) {
    console.log(await pokemon[i]);
  }
};

fetchPokemon();