JS中forEach内使用await发起API请求返回顺序与数组不一致问题

问题成因 #

• forEach 本身不支持异步等待逻辑：你传入forEach的async函数执行时会立刻返回Promise，但forEach不会等待这些Promise状态变更，会直接遍历完全部数组元素，所有请求几乎是并发发起的，最终返回顺序完全取决于对应接口的响应速度，和数组原有顺序没有关联。
• 如果你使用Promise.all后仍觉得顺序错乱，是使用方式错误导致的：Promise.all本身会严格按照传入Promise的顺序返回结果，你看到的顺序错乱大概率是你在每个独立请求的回调中直接打印返回值，而不是等所有请求完成后，从Promise.all返回的结果数组中按顺序取值。

解决方案 #

方案1：串行请求（按顺序发起，上一个请求完成后再发起下一个，整体耗时更长） #

使用支持异步等待的for...of循环代替forEach即可：

const points = [1, 2, 3, 4]
// 代码需要放在async作用域内执行
async function serialFetch() {
  for (const point of points) {
    console.log('当前请求point：', point)
    const res = await fetch(`${URL}/${point}`, {headers: { /* 你的请求头 */ }})
    // 此处打印顺序和points数组顺序完全一致
    console.log('请求结果：', res)
  }
}
serialFetch()

方案2：并发请求（所有请求同时发起，整体耗时更短，结果严格匹配原数组顺序） #

正确使用Promise.all，等所有请求完成后统一从结果数组取值即可，不要在单个请求的回调中打印结果：

const points = [1, 2, 3, 4]
async function concurrentFetch() {
  // 按原数组顺序生成所有请求的Promise实例
  const promiseList = points.map(async point => {
    const res = await fetch(`${URL}/${point}`, {headers: { /* 你的请求头 */ }})
    // 可提前处理响应，比如转换为JSON格式
    return res.json()
  })
  // 结果数组顺序和promiseList顺序完全一致，和接口响应速度无关
  const resultList = await Promise.all(promiseList)
  // 遍历结果数组即可得到和原points顺序匹配的返回值
  resultList.forEach((result, index) => {
    console.log(`对应point：${points[index]}，返回结果：`, result)
  })
}
concurrentFetch()

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