使用 Vanilla JS 使用 API 进行递归

Question

我正在玩 Rick and Morty API，我想获取宇宙中的所有角色 到一个数组中，这样我就不必进行更多的 API 调用来处理我的其余代码。

端点https://rickandmortyapi.com/api/character/以页面的形式返回结果，所以 我必须使用递归在一次 API 调用中获取所有数据。

我可以让它将结果输出到 HTML，但我似乎无法获得完整的 JSON 对象数组。

我使用了一些来自 Axios recursion for paginating an api with a cursor

我为我的问题翻译了这个概念，并将其发布在我的Codepen 这是代码：

async function populatePeople(info, universePeople){ // Retrieve the data from the API
  let allPeople = []
  let check = ''
  try {
        return await axios.get(info)
            .then((res)=>{
                // here the current page results is in res.data.results
                for (let i=0; i < res.data.results.length; i++){
                    item.textContent = JSON.stringify(res.data.results[i])
                    allPeople.push(res.data.results[i])
                }

                if (res.data.info.next){
          check = res.data.info.next
                return allPeople.push(populatePeople(res.data.info.next, allPeople))
                }
            })
    } catch (error) {
        console.log(`Error: ${error}`)
    } finally {
    return allPeople
    }
}

populatePeople(allCharacters)
  .then(data => console.log(`Final data length: ${data.length}`))

一些敏锐的眼睛和大脑会有所帮助。 这可能是一件非常简单的事情，我只是想念它。

Answer 1

以下行有问题：

return allPeople.push(populatePeople(res.data.info.next, allPeople))

这里你将一个 promise 对象推入 allPeople，当 .push() 返回一个数字时，你返回的是一个数字，而不是 allPeople。

使用for 循环到push 单个项目从一个数组到另一个实际上是复制数组的一种冗长方式。只有 HTML 部分需要循环。

另外，您将.then() 与await 混合在一起，这使事情变得复杂。只使用await。使用await 时，不再需要递归。只需将if 替换为循环即可：

while (info) {
   ....
   info = res.data.info.next;
}

您永远不会为universePeople 分配任何东西。你可以去掉这个参数。

您可以使用for...of 语法来代替普通的for 循环。

从res 开始，您只使用data 属性，仅使用该属性的变量。

所以把所有这些放在一起，你会得到这个：

async function populatePeople(info) {
    let allPeople = [];
    try {
        while (info) {
            let {data} = await axios.get(info);
            for (let content of data.results) {
                const item = document.createElement('li');
                item.textContent = JSON.stringify(content);
                denizens.append(item);
            }
            allPeople.push(...data.results);
            info = data.info.next;
        }
    } catch (error) {
        console.log(`Error: ${error}`)
    } finally {
        section.append(denizens);
        return allPeople;
    }
}

Answer 2

这是递归函数的工作示例

async function getAllCharectersRecursively(URL,results){
    try{
        const {data} =  await axios.get(URL);
        //  concat current  page results
        results =results.concat(data.results)
        if(data.info.next){
            // if there is next page call recursively
            return await getAllCharectersRecursively(data.info.next,results)
        }
        else{
            // at last page there is no next page so return collected results
            return results
        }
    }
    catch(e){
        console.log(e)
    }
}

async function main(){
    let results = await getAllCharectersRecursively("https://rickandmortyapi.com/api/character/",[])
    console.log(results.length)
}
main()

Answer 3

我不愿提供其他答案，因为 Trincot 的分析和答案很准确。

但我认为这里的递归答案可能非常优雅。由于该问题被标记为“递归”，因此似乎值得提出。

const populatePeople = async (url) => {
  const {info: {next}, results} = await axios .get (url)
  return [...results, ...(next ? await populatePeople (next) : [])]
}

populatePeople ('https://rickandmortyapi.com/api/character/')
  // or wrap in an `async` main, or wait for global async...
  .then (people => console .log (people .map (p => p .name)))
  .catch (console .warn)

.as-console-wrapper {max-height: 100% !important; top: 0}

<script>/* dummy */ const axios = {get: (url) => fetch (url) .then (r => r .json ())} </script>

这仅与获取数据有关。将它添加到您的 DOM 应该是一个单独的步骤，而且应该不难。

更新：说明

评论表明这很难解析。我认为这里有两件事可能会很棘手：

• 首先是{info: {next}, results} = <...> 中的object destructuring。这只是避免使用中间变量来计算我们实际想要使用的变量的好方法。

• 第二个是return [...results, ...<more>] 中的spread syntax。这是一种比使用.concat 或.push 更简单的构建数组的方法。 （对象也有类似的功能。）

这是另一个版本做同样的事情，但有一些中间变量和数组连接。它做同样的事情：

const populatePeople = async (url) => {
  const response = await axios .get (url)
  const next = response .info && response .info .next
  const results = response .results || []
  const subsequents = next ? await populatePeople (next) : []
  return results .concat (subsequents)
}

我更喜欢原版。但也许你会发现这一点更清楚。