如何将多页数据提取到数组中？

Question

这是我的代码

let url;
let planetCount;
let planetData = [];

//turn through the pages
for (let p = 1; p < 7; p++) {
  url = `https://swapi.boom.dev/api/planets?page=${p}`;

  //fetch data
  for (let j = 0; j < 1; j++) {
    fetch(url).then(res => res.json())
      .then(data => {

        //push data to array
        for (let i = 0; i < data.results.length; i++) {
          planetData.push(data.results[i]);
        }
      })

    console.log(planetData)

  }
}

输出如下： https://i.stack.imgur.com/Hivwr.png

问题：如何将它全部放入一个数组，而不是 6 个？

Answer 1

你只有一个数组。你只得到六次输出，因为你在一个循环中运行 console.log()。

我用正确的方法扩展了你的代码来处理多个异步调用并等待它们全部完成：

let url;
let planetCount;
let planetData = []
let promises = [];

//turn through the pages
for (let p = 1; p < 7; p++) {
url = `https://swapi.boom.dev/api/planets?page=${p}`;

//fetch data
for (let j = 0; j < 1; j++) {
    promises.push(fetch(url).then(res => res.json())
        .then(data => {

            //push data to array
            for (let i = 0; i < data.results.length; i++) {
                planetData = planetData.concat(data.results[i]);
            }

        }));
    }
}

Promise.all(promises)
.then(() => {
    console.log(planetData.length, '=>', planetData);
})

Answer 2

这是否回答了您的问题？

Promise all 应该是您可以使用的正确工具，这样您就可以等到所有 promises 都已解决后再处理响应

Answer 3

此问题与异步代码的工作方式有关。

fetch() 函数最终会 return 一个结果，但在您尝试记录它时该结果不可用。

您必须等待检索结果。使用 Aysnc/Await 来完成：

async function turnThroughThePges() {
  let url;
  let planetCount;
  let planetData = [];


  //turn through the pages
  for (let p = 1; p < 7; p++) {
    url = `https://swapi.boom.dev/api/planets?page=${p}`;
    //fetch data
    for (let j = 0; j < 1; j++) {
      await fetch(url).then(res => res.json())
        .then(data => {
          for (let i = 0; i < data.results.length; i++) {
            planetData.push(data.results[i]);
          }
        })
    }
  }
  return planetData;
}

turnThroughThePges().then(console.log);

Answer 4

您可以使用 async/await 和 Promise.all() 来 return 页面数组 returned。一旦我们有了这个，我们就可以使用 Array.flat() 创建一个连续的行星数据数组：

async function getPlanets() {
    const urls = Array.from( { length: 7 }, (v,i) => `https://swapi.boom.dev/api/planets?page=${i + 1}` );
    const promises = urls.map(url => fetch(url).then(res => res.json()).then(data => data.results));
    const planetData = (await Promise.all(promises)).flat();
    console.log(`Results for ${planetData.length} planets downloaded...`);
    console.log('Results:', planetData);
}

getPlanets()

Answer 5

let url;
let promises = [];

//turn through the pages
for (let p = 1; p < 7; p++) {
  url = `https://swapi.boom.dev/api/planets?page=${p}`;

  //fetch data
  promises.push(
    fetch(url)
      .then((res) => res.json())
      .then((data) => data.results)
  );
}

function handleRejection(p) {
  return p.catch((err) => ({ error: err }));
}
async function requests() {
  return await Promise.all(promises.map(handleRejection));
}
requests().then((planetData) => console.log(planetData.flat()));

如何将多页数据提取到数组中？

How do you fetch multiple pages of data into an array?

javascript

arrays

for-loop

fetch