如何在for循环内所有AJAX请求完成后调用reboot()函数

要实现所有循环内的AJAX调用完成后再执行reboot()，核心是利用async/await和Promise来管理异步操作的执行顺序，以下是具体修改方案：

修改后的完整代码 #

async function saveSettings() {
  // 收集所有异步操作的Promise实例
  const savingPromises = [];
  // 用for...of遍历数组，替代for...in避免非元素属性遍历问题
  for (const i of [1,2,5,4]) {
    savingPromises.push(proceedSaving(i, param1, param2));
  }
  // 等待所有异步请求完成后再执行重启
  await Promise.all(savingPromises);
  reboot();
}

async function proceedSaving(i, param1, param2) {
  const url = '/ajax/test.php?command=updateUsbPortConfig';
  // 将回调式AJAX包装为Promise，让await能正确等待请求完成
  await new Promise((resolve, reject) => {
    performAjaxPostRequest(url, urlParams, (readyState, responseText, responseXml, status) => {
      if ((readyState == 4) && ((status == 200) || (status == 0))) {
        const response = JSON.parse(responseText);
        if (response.status === 'success') {
          resolve(response); // 请求成功时标记Promise完成
        } else {
          reject(new Error('配置保存失败')); // 按需处理失败场景
        }
      } else if (readyState == 4) {
        reject(new Error(`请求异常，状态码：${status}`));
      }
    });
  });
}

// 原AJAX请求函数（假设实现逻辑不变）
function performAjaxPostRequest(url, params, handler) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onreadystatechange = () => {
    handler(xhr.readyState, xhr.responseText, xhr.responseXML, xhr.status);
  };
  xhr.send(params);
}

function reboot() {
  // 你的重启逻辑实现
}

关键修改说明 #

• 将saveSettings改为async函数：允许在函数内部使用await等待异步操作完成。
• 用Promise.all批量等待异步请求：收集所有proceedSaving返回的Promise，通过Promise.all等待全部请求完成，所有请求并行执行，效率更高；如果需要串行执行（一个请求完成后再执行下一个），可改为逐个await：

  async function saveSettings() {
    for (const i of [1,2,5,4]) {
      await proceedSaving(i, param1, param2);
    }
    reboot();
  }
  

• 包装AJAX为Promise：原performAjaxPostRequest是回调式，await无法直接感知其完成状态，通过new Promise包装后，可在回调中根据请求结果调用resolve/reject，让await正确等待。
• 替换for...in为for...of：for...in会遍历数组的所有可枚举属性（包括原型链属性），for...of专门遍历数组元素，更安全可靠。

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