如何在Next.js异步API路由中批量发起请求并合并结果？

forEach 不会等待异步回调函数执行完成。当你调用 data.forEach(async (item) => { ... }) 时，forEach 会立刻遍历完所有元素，而内部的 await fetch 还在后台执行，所以 console.log(result) 执行时，所有请求都还没返回，结果自然是空数组。

方式一：使用 for...of 顺序执行请求 #

适合需要按数组顺序发起请求的场景：

// Next.js 异步API路由内的代码
const data = ['item1','item2','item3']
let result = []

for (const item of data) {
  const res = await fetch(`https://websitename.com/${item}`)
  // 解析响应数据，这里假设接口返回数组格式，可根据实际情况调整为res.text()等
  const itemResult = await res.json()
  result = [...result, ...itemResult]
}

console.log(result) // 此时已获取所有请求结果

方式二：使用 Promise.all 并行发起请求 #

适合不需要严格顺序、追求性能的场景（所有请求同时发起，效率更高）：

// Next.js 异步API路由内的代码
const data = ['item1','item2','item3']

// 生成所有请求的Promise实例
const requestPromises = data.map(async (item) => {
  const res = await fetch(`https://websitename.com/${item}`)
  // 解析响应为数组，根据实际接口返回调整
  return await res.json()
})

// 等待所有请求完成，合并结果
const allResults = await Promise.all(requestPromises)
// 将多个数组合并为一个一维数组
const result = allResults.flat()

console.log(result) // 此时已获取所有请求结果

原代码中直接展开 res 是错误的，res 是 fetch 返回的 Response 对象，必须通过 res.json()、res.text() 等方法解析后才能得到实际响应数据，具体解析方式根据接口返回格式调整。

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