如何正确等待多个异步操作全部完成-js教程-PHP中文网

如何正确等待多个异步操作全部完成

使用 Promise.all() 并行执行并等待所有 fetch 请求结束，替代不安全的 setTimeout 和无法 await 的 forEach，确保 UI 更新前所有异步任务已确定完成。

使用 `promise.all()` 并行执行并等待所有 `fetch` 请求结束，替代不安全的 `settimeout` 和无法 await 的 `foreach`，确保 ui 更新前所有异步任务已确定完成。

在 JavaScript 中，Array.prototype.forEach() 不支持 async/await 的语义——即使传入 async 回调，它也不会等待每个 Promise 完成，而是立即返回，导致主流程“假性完成”。你当前用 setTimeout(500) 等待请求结束，不仅时间不可靠（网络延迟、服务响应波动可能导致失败），更违背了异步编程的确定性原则。

正确的做法是：将 DOM 节点集合转为数组，用 .map() 创建 Promise 数组，再用 Promise.all() 统一等待所有请求成功完成。以下是推荐实现：

JavaScript异步编程：设计快速响应的网络应用

下载

// ✅ 正确：获取所有 .depts 元素，发起并行请求，严格等待全部完成
const deptElements = document.querySelectorAll(".depts");
const fetchPromises = Array.from(deptElements).map((dept) => {
  return fetch("API/data/SaveDepartments.ashx", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ /* 每个 dept 对应的提交数据 */ })
  });
});

// 等待全部 fetch 完成（任一失败则整体 reject）
Promise.all(fetchPromises)
  .then(() => {
    // ✅ 所有请求成功后才显示确认提示
    document.getElementById("op-completed").style.display = "inline";
  })
  .catch((error) => {
    console.error("至少一个部门保存失败：", error);
    alert("部分部门保存失败，请检查网络或重试。");
  });

⚠️ 注意事项：

document.querySelectorAll() 返回的是 NodeList，不是数组，需用 Array.from() 或 [...nodeList] 转换，才能使用 .map()；

若需在每个请求后处理响应（如解析 JSON、校验状态），可在 .map() 内部 await 并返回处理结果：

const fetchPromises = Array.from(deptElements).map(async (dept) => {
  const res = await fetch("API/data/SaveDepartments.ashx", { /* ... */ });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json(); // 或其他业务逻辑
});