如何可靠等待含内部await的异步forEach执行完成？

原来的forEach循环无法正确等待异步操作完成，因为forEach会同步遍历所有元素，每个async回调只是被触发但不会被等待，导致后续的setTimeout只能靠猜测延迟时间，完全不可靠。下面是两种标准的解决方案：

方法一：并行执行所有异步操作（推荐，效率更高） #

把DOM元素转换成数组后，用map生成所有异步请求的Promise，再用Promise.all等待所有Promise完成：

// 先把NodeList转为数组
const depts = Array.from(document.querySelectorAll(".depts"));

// 用Promise.all等待所有请求完成
(async function() {
  await Promise.all(depts.map(async (dept) => {
    let posted = await fetch("API/data/SaveDepartments.ashx", {
      // REQUEST BODY
    });
    // 可在这里处理单个请求的结果，比如判断请求是否成功
  }));
  // 所有请求完成后再执行后续逻辑
  document.getElementById("op-completed").style.display = "inline";
})();

方法二：顺序执行异步操作（适合有依赖的场景） #

如果需要按顺序逐个执行请求，用for...of循环，它可以直接配合await：

(async function() {
  const depts = document.querySelectorAll(".depts");
  for (const dept of depts) {
    let posted = await fetch("API/data/SaveDepartments.ashx", {
      // REQUEST BODY
    });
    // 处理当前请求结果
  }
  // 所有请求完成后显示弹窗
  document.getElementById("op-completed").style.display = "inline";
})();

关键说明 #

• Promise.all会并行发起所有请求，总耗时等于最慢的那个请求的时间，效率更高；
• for...of会逐个执行，上一个请求完成后才会发起下一个，适合请求之间有依赖的场景；
• 两种方法都用自执行异步函数包裹，确保可以使用await等待所有操作完成，完全不需要依赖setTimeout的猜测性延迟。

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