javascript - 使用 (data.next) vanilla JS 进行 Swapi API 分页

Question

我有这个异步函数可以从 Swapi API 获取三个单独的请求来检索数据。但是，我只取回已分页的第一页数据。我知道我必须为 data.next 创建一个循环来发出新请求，但我不确定通过我的函数运行它的最佳方式。

(async function getData() {

//Utility Functions for fetch
    const urls = ["https://swapi.co/api/planets/", "https://swapi.co/api/films/", "https://swapi.co/api/people/"];
    const checkStatus = res => res.ok ? Promise.resolve(res) : Promise.reject(new Error(res.statusText));
    const parseJSON = response => response.json();

//Get Data
    await Promise.all(urls.map(url => fetch(url)
      .then(checkStatus)
      .then(parseJSON)
      .catch(error => console.log("There was a problem!", error))))
      .then(data => {
        let planets = data[0].results,
            films = data[1].results,
            people = data[2].results;
        buildData(films, planets, people);
    });
})();

Answer 1

您正在尝试访问循环中的所有 data.results 键，这错过了使用 Promise.all 的要点。 Promise.all 收集 Promise 的所有结果，并在所有 Promise 解决后将其存储在单个数组中。

因此，等待 Promise 解析并使用从 Promise.all 返回的数组来构建数据。

要获取所有页面，您需要具有递归函数。这意味着该函数将不断调用自身，直到满足条件为止。有点像循环，但有回调。

每次获取页面时，通过检查响应对象中的 next 属性来检查是否有下一页。如果有，则再次调用getAllPages，直到没有更多页面为止。同时，所有结果都连接在一个数组中。该数组将传递到下一个调用，该调用再次将其与结果连接起来。最后返回包含所有连接数组的 collection 变量。

如果您对代码有任何疑问，请告诉我。

(async function getData() {

  //Utility Functions for fetch
  const urls = ["https://swapi.co/api/planets/", "https://swapi.co/api/films/", "https://swapi.co/api/people/"];
  const checkStatus = res => res.ok ? Promise.resolve(res) : Promise.reject(new Error(res.statusText));
  const parseJSON = response => response.json();

  // Get a single endpoint.
  const getPage = url => fetch(url)
    .then(checkStatus)
    .then(parseJSON)
    .catch(error => console.log("There was a problem!", error));

  // Keep getting the pages until the next key is null.
  const getAllPages = async (url, collection = []) => {
    const { results, next } = await getPage(url);
    collection = [...collection, ...results];
    if (next !== null) {
      return getAllPages(next, collection);
    }
    return collection;
  }

  // Select data out of all the pages gotten.
  const [ planets, films, people ] = await Promise.all(urls.map(url => getAllPages(url)));
  buildData(films, planets, people);

})();