如何实现Promise数组发起HTTP请求时即时输出console.log日志

• 当前实现是全并行触发所有请求，完全没有串行等待的逻辑：data.map的循环体是同步执行的，整个遍历过程会在几毫秒内跑完，瞬间把所有条目对应的API请求全部发出去，不存在“等上一个请求响应完再发下一个”的时序控制。因为所有请求的响应会在同一时间到达，如果实际开发中不小心把日志打印的位置放到了await mockAPI()的后面，就会出现“所有请求完成后一次性批量输出日志”的现象。
• 代码存在Promise反模式：在new Promise时传入async函数作为executor，不仅多套了一层无意义的Promise包装，还会导致同步阶段抛出的错误无法被Promise实例正常捕获，实际运行时输出容易和长任务的执行节奏混淆，进一步放大体感上的日志延迟问题。

如果你需要的是「发起第一个请求时立刻输出1，等待3秒响应结束后，再发起第二个请求输出2」的串行效果，直接用async/await配合for...of循环实现逐次等待即可，不需要用map一次性生成所有并行Promise：

const data = ['one','two']
const mockAPI = (timeout) => new Promise(resolve => setTimeout(resolve, timeout))
let counter = 0

async function runSequentially() {
  const results = []
  for (const item of data) {
    counter++
    // 走到这里立刻打印当前请求序号，无延迟
    console.log(counter)
    // 等待当前请求完成，再进入下一次循环
    const response = await mockAPI(3000)
    results.push(response)
  }
  return results
}

const result = runSequentially()

执行时序说明 #

1. 首次进入循环：counter 变为1，立刻打印日志，发起第一个API请求并等待3秒响应
2. 第一个请求响应完成后，进入第二次循环：counter 变为2，立刻打印日志，发起第二个API请求并等待3秒响应
3. 所有条目处理完成后返回收集到的结果，完全匹配你要的输出节奏。

补充说明 #

如果你本身就需要并行发送所有请求，只是希望日志即时打印，只需要去掉冗余的Promise包装，直接让map回调返回async函数生成的Promise即可，不要额外套一层带async executor的new Promise，避免不必要的时序问题：

// 并行请求的正确简化写法
const promises = data.map(async () => {
  counter++
  console.log(counter)
  await mockAPI(3000)
})
const result = Promise.all(promises)

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