jQuery.when() 方法（最佳实践）

什么是 jQuery.when() 方法？

在前端开发中，我们常常需要同时发起多个异步请求，比如从不同接口获取用户信息、订单数据和订单统计图表。如果这些请求是串行执行的，页面加载速度会非常慢，用户体验也会大打折扣。

这时候，jQuery.when() 方法就派上用场了。它允许你并行处理多个异步操作，并在所有操作都完成后统一执行后续逻辑。

你可以把 jQuery.when() 想象成一个“调度员”：你把多个任务（比如网络请求）交给它，它会同时启动这些任务，等全部完成后再告诉你“可以继续下一步了”。

这个方法在处理多数据源聚合、页面初始化加载、表单验证等多个场景中非常实用。

jQuery.when() 方法的语法与基本用法

jQuery.when() 方法的语法非常简洁：

jQuery.when( promise1, promise2, ..., promiseN )
  .done( function( [ data1, data2, ..., dataN ] ) {
    // 所有异步操作都成功完成后的回调
  })
  .fail( function( ) {
    // 至少有一个异步操作失败时的回调
  });

注意：

• 参数可以是 jQuery 的 Promise 对象，也可以是普通的异步函数返回的 Promise。
• done() 回调函数接收一个参数数组，每个元素对应一个异步操作的返回结果。
• fail() 回调会在任意一个异步任务失败时触发，且只触发一次。

一个简单的例子

假设我们有两个模拟的异步请求，分别获取用户信息和订单数量：

// 模拟获取用户信息的异步请求
function fetchUserInfo() {
  return $.Deferred(function( deferred ) {
    setTimeout(function() {
      deferred.resolve({ name: "张三", age: 28 });
    }, 1000);
  }).promise();
}

// 模拟获取订单数量的异步请求
function fetchOrderCount() {
  return $.Deferred(function( deferred ) {
    setTimeout(function() {
      deferred.resolve(5);
    }, 800);
  }).promise();
}

// 使用 jQuery.when() 并行执行两个请求
$.when( fetchUserInfo(), fetchOrderCount() )
  .done(function( userData, orderCount ) {
    console.log("用户信息:", userData);      // { name: "张三", age: 28 }
    console.log("订单数量:", orderCount);    // 5
    alert("所有数据已加载完成！");
  })
  .fail(function() {
    console.log("至少有一个请求失败了");
  });

代码注释说明：

• $.Deferred() 用于创建一个延迟对象，是 Promise 的底层实现。
• deferred.resolve() 表示任务成功完成，传入的数据将作为后续 done() 的参数。
• promise() 方法将延迟对象暴露为只读的 Promise，防止外部误修改。
• $.when() 接收两个返回 Promise 的函数，异步执行，1 秒后返回用户数据，0.8 秒后返回订单数。
• done() 接收两个参数：userData 是用户信息对象，orderCount 是订单数量，顺序与传入的函数一致。

处理多个异步任务的实战案例

在实际项目中，我们经常需要从多个 API 获取数据，比如一个电商首页需要同时加载商品列表、推荐商品和用户登录状态。

下面是一个完整的实战案例：

// 模拟获取商品列表
function fetchProductList() {
  return $.ajax({
    url: "/api/products",
    method: "GET",
    dataType: "json"
  });
}

// 模拟获取推荐商品
function fetchRecommendedProducts() {
  return $.ajax({
    url: "/api/recommendations",
    method: "GET",
    dataType: "json"
  });
}

// 模拟检查用户登录状态
function checkUserLogin() {
  return $.ajax({
    url: "/api/user/status",
    method: "GET",
    dataType: "json"
  });
}

// 并行加载所有数据
$.when( fetchProductList(), fetchRecommendedProducts(), checkUserLogin() )
  .done(function( products, recommended, userStatus ) {
    // 所有请求成功后，更新页面
    console.log("商品列表:", products[0]);     // 0 是响应数据，1 是状态码，2 是 xhr
    console.log("推荐商品:", recommended[0]);
    console.log("登录状态:", userStatus[0]);

    // 更新 DOM
    $("#product-list").html( products[0].map(p => `<li>${p.name}</li>`).join("") );
    $("#recommend-list").html( recommended[0].map(p => `<li>${p.name}</li>`).join("") );
    $("#user-status").text( userStatus[0].isLogin ? "已登录" : "未登录" );
  })
  .fail(function() {
    // 任一请求失败，显示错误提示
    alert("数据加载失败，请稍后重试");
  });

关键点说明：

• $.ajax() 返回的是一个 jQuery 的 Promise 对象，可以直接传给 $.when()。
• done() 回调中的参数是数组，每个元素是一个 [response, statusText, xhr] 三元组。
• 通常我们只关心 response，即 data[0]。
• fail() 会捕获任意一个请求失败的情况，避免程序崩溃。

如何处理部分失败？理解 jQuery.when() 的“全赢或全输”机制

jQuery.when() 有一个重要特性：只要有一个异步任务失败，整个流程就会进入 fail 回调，不会继续执行 done。

这就像一个团队协作任务：如果小组里有人没完成任务，整个项目就不能算成功。

但有时候我们希望“部分失败也继续运行”，比如用户登录失败，但商品列表仍要显示。

这时我们可以使用 $.when() 配合 $.Deferred() 手动控制：

function safeFetch( promise, fallback ) {
  return promise.then(
    function( data ) {
      return $.Deferred().resolve( data );
    },
    function( ) {
      return $.Deferred().resolve( fallback );
    }
  ).promise();
}

// 使用安全包装的异步请求
$.when(
  safeFetch( fetchProductList(), [] ),
  safeFetch( fetchRecommendedProducts(), [] ),
  safeFetch( checkUserLogin(), { isLogin: false } )
)
.done(function( products, recommended, userStatus ) {
  console.log("所有数据已加载，即使部分失败也继续执行");
  // 即使某个请求失败，程序仍可继续
})
.fail(function() {
  console.log("所有请求都失败了");
});

注释说明：

• safeFetch() 是一个包装函数，将失败的请求转换为返回默认值。
• then() 的第一个参数是成功回调，第二个是失败回调。
• 我们在失败时返回一个 $.Deferred().resolve(fallback)，这样整个 Promise 就变成“成功”状态。
• 这样即使某个请求失败，$.when() 仍会进入 done，实现“容错”处理。

与原生 Promise.all() 的对比

随着 ES6 的普及，原生的 Promise.all() 也提供了类似功能。那么，jQuery.when() 有必要存在吗？

答案是：在现代项目中，Promise.all() 更推荐，但 jQuery.when() 仍有其价值。

例如，Promise.all() 用法如下：

Promise.all([
  fetch("/api/products").then(r => r.json()),
  fetch("/api/recommendations").then(r => r.json())
])
.then( ([products, recommendations]) => {
  console.log(products, recommendations);
})
.catch( () => {
  console.log("至少一个请求失败");
});

总结：

• 如果你在使用 jQuery，且项目依赖较旧，jQuery.when() 依然可靠。
• 如果你使用现代框架（Vue、React、Angular），建议优先使用 Promise.all()。
• 两者逻辑一致，选择取决于项目环境。

为什么 jQuery.when() 方法值得掌握？

在前端开发中，异步编程是常态。掌握 jQuery.when() 方法，不仅能让你写出更高效的代码，还能提升用户体验。

它让你从“一个一个等”变成“一起等”，大大减少等待时间。

更重要的是，它提供了一种清晰的流程控制方式：先并行执行，再统一处理结果。这种模式在数据聚合、页面初始化、多模块加载等场景中非常通用。

如果你还在用回调嵌套写异步逻辑（“回调地狱”），那么 jQuery.when() 正是你迈向现代异步编程的第一步。

别忘了，它不仅是工具，更是一种思维方式：把多个任务看作一个整体，统一调度、统一反馈。

掌握它，你就离“优雅的异步编程”更近了一步。