Question

我正在使用《星球大战》 API https://swapi.co/，我需要获取星际飞船信息，星际飞船的结果跨越4页，但是get调用每页仅返回10个结果。如何遍历多个页面并获取所需的信息？

我已经使用fetch api获取星际飞船的第一页，然后将这个10的数组添加到我的totalResults数组中，然后创建了While循环来检查'next！== null'（next是数据中的下一页属性，如果我们正在查看最后一页，即第4页，则next将为null“ next” = null）只要next不等于null，我的While循环代码应获取数据并添加到我的totalResults数组。我在最后更改了next的值，但它似乎永远循环并崩溃。

function getData() {
    let totalResults = [];

    fetch('https://swapi.co/api/starships/')
        .then( res => res.json())
        .then(function (json) {
            let starships = json;
            totalResults.push(starships.results);
            let next = starships.next;

            while ( next !== null ) {
                fetch(next)
                .then( res => res.json() )
                .then( function (nextData) {
                    totalResults.push(nextData.results);
                    next = nextData.next;
                })
            }

        });      
}

代码不断循环，这意味着我的'next = nextData.next;'增量似乎不起作用。

Answer 1

您必须在while循环中await进行响应，否则循环将同步运行，而结果将异步到达，换句话说，while循环将永远运行：

  async getData() {
     const results = [];
     let url = 'https://swapi.co/api/starships/';

     do {
       const res = await fetch(url);
       const data = await res.json();
       url = data.next;
       results.push(...data.results);
     } while(url)

     return results;
 }

Answer 2

您可以更轻松地使用async/await函数：

async function fetchAllPages(url) {
    const data = [];

    do {
        let response = fetch(url);
        url = response.next;
        data.push(...response.results);
    } while ( url );

    return data;
}

通过这种方式，您可以将此函数重新用于其他api调用。

如何在API中循环浏览多个页面？

2 个答案: