如何让JavaScript循环等待每次迭代完成后再启动下一次？

问题原因 #

现有代码会同步一次性触发1000个并行请求，浏览器/Node.js环境对同域名的并发请求数存在固定上限（通常为6~8个），超出限制的请求会进入等待队列调度，这就是1000次循环时首次请求返回耗时大幅上涨的核心原因。

实现方案1：async/await 串行执行（推荐） #

将循环逻辑放在异步函数内，每次循环通过await等待当前请求完成后再进入下一轮迭代：

// 确保你的request方法返回Promise实例
async function serialRequest(times) {
  const start = Date.now()
  for (let i = 0; i < times; i++) {
    const data = await request()
    console.log(Date.now() - start, data)
  }
}

// 启动1000次串行请求
serialRequest(1000)

注意需使用let声明循环变量i，避免变量提升导致的上下文异常。

实现方案2：Promise链式递归实现（兼容ES2015+环境） #

如果运行环境不支持async/await语法，可以用递归链式调用的方式实现串行逻辑：

const start = Date.now()
let currentCount = 0
const totalCount = 1000

function runNextRequest() {
  if (currentCount >= totalCount) return
  request.then(data => {
    currentCount++
    console.log(Date.now() - start, data)
    // 上一次请求完成后触发下一次请求
    runNextRequest()
  })
}

// 启动首次请求
runNextRequest()

两种实现均会严格等待上一次请求返回后再发起下一次请求，不会出现并行排队的情况，首次请求耗时和单次请求耗时基本一致。

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