jQuery Deferred - 等待多个 AJAX 请求完成[重复]

Ajax

使用jQuery Deferred对象可以很方便地管理多个Ajax请求的完成状态。当需要等待多个Ajax请求全部完成后再执行下一步操作时，可以使用Deferred对象的$.when()方法来实现。本文将介绍如何使用jQuery Deferred对象来等待多个Ajax请求完成，并提供一个案例代码来演示。

等待多个Ajax请求完成的方法

在实际开发中，经常会遇到需要同时发送多个Ajax请求的情况，而且需要等待所有请求都完成后再进行下一步操作。使用传统的回调函数方式来处理这种情况会变得非常复杂，而使用Deferred对象可以简化这个过程。

首先，需要创建多个Ajax请求，并把它们存储在一个数组中。然后，使用$.when()方法来等待这些请求全部完成。最后，使用$.done()方法来处理所有请求完成后的回调函数。

下面是一个使用jQuery Deferred对象等待多个Ajax请求完成的示例代码：

Javascript
// 创建多个Ajax请求
var request1 = $.Ajax({
  url: "example.com/api/data1",
  method: "GET"
});
var request2 = $.Ajax({
  url: "example.com/api/data2",
  method: "GET"
});
var request3 = $.Ajax({
  url: "example.com/api/data3",
  method: "GET"
});
// 等待所有请求完成
$.when(request1, request2, request3).done(function(response1, response2, response3) {
  // 所有请求完成后的回调函数
  console.log("请求1的结果：", response1);
  console.log("请求2的结果：", response2);
  console.log("请求3的结果：", response3);
  // 执行下一步操作
});

在上面的代码中，首先创建了三个不同的Ajax请求，分别向不同的URL发送GET请求。然后使用$.when()方法等待这三个请求全部完成。当所有请求完成后，$.done()方法会触发回调函数，并将每个请求的结果作为参数传递给回调函数。在回调函数中，可以处理每个请求的结果，并执行下一步操作。

案例分析

假设我们正在开发一个网站，需要从不同的API接口获取用户的个人信息、订单信息和购物车信息。为了提高页面加载速度，我们可以使用Deferred对象来并行地发送这三个Ajax请求，并在所有请求完成后再渲染页面。

首先，创建三个Ajax请求，并把它们存储在一个数组中：

Javascript
var request1 = $.Ajax({
  url: "example.com/api/user",
  method: "GET"
});
var request2 = $.Ajax({
  url: "example.com/api/orders",
  method: "GET"
});
var request3 = $.Ajax({
  url: "example.com/api/cart",
  method: "GET"
});

然后，使用$.when()方法等待这三个请求全部完成：

Javascript
$.when(request1, request2, request3).done(function(user, orders, cart) {
  // 请求完成后的回调函数
  renderPage(user[0], orders[0], cart[0]);
});

在上面的代码中，回调函数中的user、orders和cart参数分别为请求1、请求2和请求3的结果。可以根据需要对这些结果进行处理，比如渲染页面。

接下来，定义一个渲染页面的函数renderPage()，并将请求的结果作为参数传入：

Javascript
function renderPage(user, orders, cart) {
  // 渲染页面的逻辑
  console.log("用户信息：", user);
  console.log("订单信息：", orders);
  console.log("购物车信息：", cart);
}

在renderPage()函数中，可以根据需要使用请求的结果来更新页面的内容。

最后，将上述代码放在页面加载完成的事件处理函数中，以确保在页面加载后执行：

Javascript
$(document).ready(function() {
  // 创建多个Ajax请求
  var request1 = $.Ajax({
    url: "example.com/api/user",
    method: "GET"
  });
  var request2 = $.Ajax({
    url: "example.com/api/orders",
    method: "GET"
  });
  var request3 = $.Ajax({
    url: "example.com/api/cart",
    method: "GET"
  });
  // 等待所有请求完成
  $.when(request1, request2, request3).done(function(user, orders, cart) {
    // 请求完成后的回调函数
    renderPage(user[0], orders[0], cart[0]);
  });
  // 渲染页面的函数
  function renderPage(user, orders, cart) {
    // 渲染页面的逻辑
    console.log("用户信息：", user);
    console.log("订单信息：", orders);
    console.log("购物车信息：", cart);
  }
});

通过上述案例，我们可以看到如何使用jQuery Deferred对象来等待多个Ajax请求完成，并在所有请求完成后执行下一步操作。这种方式可以极大地简化代码的编写，提高开发效率。同时，也能够更好地管理多个异步请求的状态，使代码更加可读和可维护。