如何将fetch请求的多页接口数据存入同一个数组而非多个数组

你现在看到的「6个不同数组」其实是同一个数组的不同阶段打印结果：fetch是异步API，你在循环里触发请求后立刻打印数组时，大部分请求还没返回结果，浏览器控制台展示的是数组在打印时刻的状态，等所有请求陆续返回后数据才会逐步补全。要拿到完整的合并后数组，只需要等所有分页请求全部执行完成后再统一处理即可，参考代码如下：

并发请求方案（推荐，速度快） #

用Promise.all批量处理所有分页请求，所有请求并行执行，全部完成后统一合并数据：

async function getAllPlanets() {
  // 先生成6个分页的请求实例
  const requestList = Array.from({length: 6}, (_, idx) => {
    return fetch(`https://swapi.boom.dev/api/planets?page=${idx + 1}`)
      .then(res => res.json())
  })
  // 等待所有请求返回结果
  const allPageResult = await Promise.all(requestList)
  // 合并所有分页的results到同一个数组
  const planetData = allPageResult.flatMap(page => page.results)
  // 这里拿到的就是合并完成的完整数据
  console.log(planetData)
  // 后续业务逻辑写在这里即可
  return planetData
}

// 调用函数拉取数据
getAllPlanets()

补充说明 #

如果分页总数不固定，可以先请求第一页拿到接口返回的总页数，再动态生成请求列表，不用硬编码长度为6，适配性更强。

内容的提问来源于stack exchange，提问作者koko