javascript - 使用 fetch 递归加载分页数据

Question

我想从此 API 获取数据:“https://swapi.co/api/planets ”。数据分页如下 https://swapi.co/api/planets/?page=1 , https://swapi.co/api/planets/?page=2 ....

我想构建一个接受 url、页面和回调作为参数的 API。它将逐页获取所有数据，直到到达参数中指定的页面。

例如

function loadData(https://swapi.co/api/planets, 5, cb)

这将从 page1、page2、page3、page4 和 page5 加载数据。

这是我的尝试，但它不起作用。有人可以指出我正确的方向吗？

function fn(url, page, pages, cb) {
  return new Promise((resolve, reject) => {
    const endpoint = `${url}/?page=${page}`;
    fetch(endpoint).then(response => {
      if (response.status !== 200) {
        throw `${response.status} ${response.statusText}`;
      }
      response.json().then(data => {
        cb(data);
        if (page <= pages) {
          fn(url, page + 1, pages, cb)
            .then(resolve)
            .catch(reject);
        } else {
          resolve();
        }
      });
    });
  });
}

function cb(data) {
  console.log(data)
}

fn('https://swapi.co/api/planets', 1, 3, cb).then(() => {});

后续问题:如果我不想传入回调作为参数，而是想传入一个数组来收集加载的数据，我应该如何调整这个 API？

Answer 1

正如之前所说，您可能不需要等待每个调用完成才能执行下一个调用，但如果您真的愿意，我只能说我发现它更容易解析(作为人类)使用异步/等待。

我在此代码段中完成了一个快速基本版本供您查看，没有错误处理或检查数据是否正确。也许这种方法更适合您？

async function getPage(page) {
  let response = await fetch(`https://swapi.co/api/planets/?page=${page}`);
  let data = await response.json()
  return data;
}


async function getPages(startPage, endPage) {
  let currentPage = startPage;
  let finalArr = [];
  while(currentPage <= endPage) {
    const pageData = await getPage(currentPage);
    console.log('adding page', currentPage);
    finalArr.push(...pageData.results);
    currentPage++;
  }

  console.log(finalArr)
}

getPages(1, 3);