使用 fetch 递归加载分页数据

2022-01-19 00:00:00 frontend javascript ecmascript-6

我想从此 API 获取数据:https://swapi.co/api/planets".数据分页像https://swapi.co/api/planets/?page=1,https://swapi.co/api/planets/?page=2....

I would like to fetch data from this API: "https://swapi.co/api/planets". The data is paginated like https://swapi.co/api/planets/?page=1, https://swapi.co/api/planets/?page=2....

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

I want to build an API which accepts url, page, and callback as arguments. It will fetch all of the data page by page, until it reaches the page specified in the arguments.

例如

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

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

this will load data from page1, page2, page3, page4 and page5.

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

Here is my attempt however it doesn't work. Can someone please point me in the right direction ?

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?

Follow up question: if instead of passing in a callback as the argument, I want to pass in an array to collect the data loaded, how should I tweak this API?

推荐答案

正如之前所说，您可能不需要等待每个调用完成后再进行下一个调用，但如果您真的想要，我只需说我发现使用 async/await 解析(作为人类)更容易.

As has been said before, you probably don't need to wait for each call to finish before doing the next, but if you really want to I just have to say I find it much easier to parse (as a human) using async / await.

我在这个片段中做了一个快速的基本版本供您查看，没有错误处理或检查数据是否正确.也许这种方法可能更适合您?

I've done a quick basic version here in this snippet for you to see, with no error handling or checking the data is right. Maybe this approach might suit you better?

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);

相关文章