Разбиение на страницы API Swapi с использованием (data.next) vanilla JS - PullRequest
Новая
       3

Разбиение на страницы API Swapi с использованием (data.next) vanilla JS

1 голос
/ 13 февраля 2020

У меня есть эта функция asyn c для получения трех отдельных запросов от API свапи для получения данных. Однако я возвращаю только первую страницу данных, поскольку они разбиты на страницы. Я знаю, что должен создать al oop для 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);
    });
})();

1 Ответ

0 голосов
/ 13 февраля 2020

Вы пытаетесь получить доступ ко всем data.results клавишам в l oop, что не соответствует смыслу использования Promise.all. Promise.all собирает все результаты из обещаний и сохраняет их в одном массиве, когда все обещания разрешены.

Так что дождитесь разрешения обещаний и используйте массив, возвращенный из Promise.all, для построения ваших данных.

Чтобы получить все страницы, вам нужна рекурсивная функция. Это означает, что эта функция будет продолжать вызывать себя, пока не будет выполнено условие. Вроде как al oop, но с обратными вызовами.

Каждый раз, когда вы выбираете страницу, проверяйте, есть ли следующая страница, проверяя свойство 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);

})();
...