遍历Map对象时如何让循环体内的await正常生效

核心问题出在遍历方法的选择上：Map.prototype.forEach 不会等待异步回调执行，循环内部写的await只会在当前回调函数内生效，无法阻塞遍历流程，最终会导致所有异步任务并发触发，既没法保证执行顺序，也没法在循环结束后拿到所有异步结果。
根据实际业务需求，选对应写法即可：

场景1：按Map遍历顺序串行执行（上一个异步任务完成后再执行下一个） #

这是最符合多数人「await按预期执行」诉求的写法，优先用原生for...of遍历，写法最简洁：

const demoMap = new Map([
  ['id1', '数据1'],
  ['id2', '数据2'],
  ['id3', '数据3']
])

async function serialProcessMap() {
  for (const [mapKey, mapValue] of demoMap) {
    // 此处await会正常阻塞，当前异步任务执行完才会进入下一轮循环
    const processRes = await yourAsyncOperation(mapValue)
    console.log(`键${mapKey}处理完成，结果：${processRes}`)
  }
  console.log('所有Map项按顺序处理完毕')
}

如果需要兼容不支持for...of的老旧环境，可以先把Map转成数组，用普通索引for循环遍历：

async function serialProcessMapCompat() {
  const entryList = Array.from(demoMap.entries())
  for (let i = 0; i < entryList.length; i++) {
    const [mapKey, mapValue] = entryList[i]
    const processRes = await yourAsyncOperation(mapValue)
    console.log(`键${mapKey}处理完成，结果：${processRes}`)
  }
}

场景2：并发执行所有异步任务，最后统一等待全部完成 #

如果不需要严格按遍历顺序执行，想要提升执行效率，可以先收集所有异步任务的Promise实例，用Promise.all统一等待：

async function parallelProcessMap() {
  const taskList = []
  for (const [mapKey, mapValue] of demoMap) {
    taskList.push(
      yourAsyncOperation(mapValue).then(res => ({key: mapKey, result: res}))
    )
  }
  // 等待所有并发任务全部执行完成
  const allResult = await Promise.all(taskList)
  console.log('所有Map项并发处理完成', allResult)
}

避坑提醒 #

不要用forEach遍历写异步逻辑，属于典型错误写法：

// 错误示例：无法按预期等待await执行
demoMap.forEach(async (value, key) => {
  // 此处await不会阻塞外层遍历，所有异步任务会直接并发触发
  const res = await yourAsyncOperation(value)
  console.log(res)
})
// 这行日志会在所有异步任务执行完成前就提前打印
console.log('遍历结束')

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