回调地狱、jQuery jqXHR .then 链式、Promise + async/await写法对比

方案一：老式回调写法（不推荐，容易走向回调地狱，仅作对比）

$.ajax({
  url: "/api/getUser",
  method: "GET",
  success(user) {
    // 第二个请求依赖第一个返回的 userId
    $.ajax({
      url: `/api/getOrders?userId=${user.id}`,
      method: "GET",
      success(orders) {
        console.log("订单数据", orders);
      },
      error(err) {
        console.error("获取订单失败", err);
      }
    })
  },
  error(err) {
    console.error("获取用户失败", err);
  }
});

缺点：多层嵌套，再多请求就形成回调地狱。

方案二：利用 jQuery jqXHR .then 链式（推荐）

$.ajax 返回 jqXHR，支持链式调用，then 中 return 新的 ajax 请求，下一级 then 接收结果

$.ajax({
  url: "/api/getUser",
  method: "GET"
})
.then(function (user) {
  // 返回第二个异步请求
  return $.ajax({
    url: `/api/getOrders?userId=${user.id}`,
    method: "GET"
  });
})
.then(function (orders) {
  console.log("最终订单：", orders);
})
.catch(function (err) {
  // 统一捕获任意一处错误
  console.error("请求异常：", err);
});

方案三：封装成标准 Promise + async/await（现代写法，可读性最强）

先封装请求函数：

function getUser() {
  return $.ajax({
    url: "/api/getUser",
    method: "GET"
  });
}

function getOrders(userId) {
  return $.ajax({
    url: `/api/getOrders?userId=${userId}`,
    method: "GET"
  });
}

// 异步函数调用
async function loadData() {
  try {
    const user = await getUser();
    const orders = await getOrders(user.id);
    console.log("订单列表", orders);
  } catch (err) {
    console.error("请求出错", err);
  }
}

loadData();

重点知识点

1. jQuery 的 jqXHR 对象是 类 Promise，可以直接使用 .then()、await；

2. 在 .then() 内部 return $.ajax(...)，链式会等待这个新请求完成；

3. 整条链只需要一个 .catch()，可以捕获第一个、第二个请求任意一处报错；

4. 对比：

   • 嵌套回调：横向扩展（回调地狱）
   • then 链式 /async await：纵向书写，结构清晰

补充：如果你想严格转成原生标准 Promise（极少场景需要）

function getUser() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: "/api/getUser",
      success: resolve,
      error: reject
    })
  });
}

⚠️ 提醒：正常项目不需要这么写，属于多余封装（Promise 反模式），理解原理即可。

补充

Vue + Axios 等价写法

import axios from 'axios';

function getUser() {
  // axios 直接返回原生 Promise
  return axios.get("/api/getUser");
}

function getOrders(userId) {
  return axios.get(`/api/getOrders?userId=${userId}`);
}

// 调用方式和 jQuery 版本几乎一模一样！
async function loadData() {
  try {
    const resUser = await getUser();
    const user = resUser.data; // ⚠️重点区别：axios 响应包一层对象
    const resOrders = await getOrders(user.id);
    const orders = resOrders.data;
    console.log("订单列表", orders);
  } catch (err) {
    console.error("请求出错", err);
  }
}

loadData();