如何为jQuery Ajax函数编写同步包装器？

不用大幅重构代码的核心思路是利用ES6的async/await语法，它能让异步代码看起来和同步代码几乎一致，完美匹配你想替换调用方式的需求。

步骤1：把异步Ajax函数封装成Promise #

首先确保你的asynchronousAjaxFunction返回一个Promise（这是await能生效的前提）。如果是基于XMLHttpRequest的异步请求，封装方式如下：

function asynchronousAjaxFunction() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/目标接口地址', true); // 第三个参数true代表异步
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText); // 请求成功时返回结果
      } else {
        reject(new Error(`请求失败：${xhr.statusText}`)); // 请求失败时抛出错误
      }
    };
    xhr.onerror = () => reject(new Error('网络请求出错'));
    xhr.send();
  });
}

如果用fetch API，本身就返回Promise，直接用就行：

async function asynchronousAjaxFunction() {
  const response = await fetch('/目标接口地址');
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  return response.text();
}

步骤2：替换同步调用为await #

把原来的同步调用语句synchronousAjaxFunction();直接替换成await asynchronousAjaxFunction();，同时给包含这个调用的外层函数加上async关键字。

比如原来的代码：

function processData() {
  // 一些前置逻辑
  synchronousAjaxFunction();
  // 必须等Ajax完成才能执行的后续逻辑
  console.log('Ajax完成，继续执行');
}

改成：

async function processData() {
  // 一些前置逻辑
  await asynchronousAjaxFunction();
  // 后续逻辑会自动等待异步请求完成后再执行
  console.log('Ajax完成，继续执行');
}

步骤3：处理顶层/非async函数中的调用 #

如果是在全局作用域或者非async函数里调用这个async函数，用自执行的async函数或者.then()处理：

// 方式1：自执行async函数
(async () => {
  await processData();
  // 全局作用域下的后续代码
})();

// 方式2：用then链式调用
processData().then(() => {
  // 后续代码
}).catch(err => {
  // 处理请求错误
  console.error(err);
});

步骤4：错误处理（和同步逻辑一致） #

原来的同步Ajax如果用try/catch处理错误，现在异步场景下同样可以用try/catch包裹await调用，逻辑完全复用：

async function processData() {
  try {
    await asynchronousAjaxFunction();
    // 请求成功后的逻辑
  } catch (err) {
    // 请求失败的处理逻辑，和同步写法一致
    console.error('处理请求错误：', err);
  }
}

这种改动方式几乎是“点对点替换”，不需要调整原有代码的逻辑结构，只是给外层函数加个async，把同步调用换成await异步函数，完全满足你不想大幅重构的需求。

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