本文讲解如何在 JavaScript 中正确等待 for 循环内多个异步 AJAX 请求全部完成，再统一执行后续操作（如调用 reboot()），重点解决 await 失效、请求并行/串行控制及回调函数兼容性问题。
本文讲解如何在 javascript 中正确等待 for 循环内多个异步 ajax 请求全部完成，再统一执行后续操作（如调用 `reboot()`），重点解决 `await` 失效、请求并行/串行控制及回调函数兼容性问题。
在实际开发中，常需对数组中的每个 ID 执行 AJAX 更新操作（如保存 USB 端口配置），并确保所有请求成功响应后才触发重启逻辑（reboot()）。但直接在 for 循环中调用异步函数并紧接 reboot() 会导致其立即执行——因为原生 performAjaxPostRequest 并不返回 Promise，await 无法生效。
✅ 正确做法：Promise 化 + 异步控制
首先需将基于回调的 AJAX 方法封装为 Promise 版本，使其可被 await 消费：
// 将回调式 AJAX 转为 Promise（关键一步）
function promisePostResponse(url, urlParams) {
return new Promise((resolve) => {
performAjaxPostRequest(url, urlParams, (...args) => resolve(args));
});
}
接着改造 proceedSaving 为 async 函数，并 await 上述 Promise：
async function proceedSaving(i, param1, param2) {
const url = '/ajax/test.php?command=updateUsbPortConfig';
// 构造参数（示例，按需补充）
const urlParams = { id: i, param1, param2 };
try {
const [readyState, responseText, responseXml, status] =
await promisePostResponse(url, urlParams);
saveResponseHandler(readyState, responseText, responseXml, status);
} catch (err) {
console.error(`AJAX failed for ID ${i}:`, err);
}
}
最后，根据业务需求选择串行或并行执行模式：
▪ 方式一：串行执行（逐个等待，适合强依赖或限流场景）
async function saveSettings() {
const ids = [1, 2, 5, 4]; // 可动态传入，如：saveSettings([1,3], p1, p2)
for (const i of ids) {
await proceedSaving(i, param1, param2); // 阻塞直到当前请求完成
}
reboot(); // 所有请求结束后执行
}
▪ 方式二：并行执行（推荐，性能更优，无依赖时首选）
async function saveSettings() {
const ids = [1, 2, 5, 4];
// 同时发起所有请求，Promise.all 等待全部 settle
await Promise.all(
ids.map(i => proceedSaving(i, param1, param2))
);
reboot(); // 全部完成（含成功/失败）后执行
}
⚠️ 注意事项：
- 避免使用
for...in遍历数组（它遍历属性名，非数值索引），改用for...of或Array.prototype.map()；Promise.all()在任一 Promise reject 时即 reject，如需“全部执行完再处理”，请改用Promise.allSettled()；saveResponseHandler中建议增加错误分支处理（如status !== 200或response.status !== 'success'），避免静默失败；- 若
param1/param2是外部变量，请确保其在闭包中正确捕获（map和for...of均天然支持）。
通过 Promise 化 + async/await 组合，即可精准控制异步流程，让 reboot() 真正成为所有 AJAX 的“守门人”。
