Jquery高级应用Deferred对象原理及使用实例

什么是Deferred对象

在jQuery1.5版本中新增了一个Deferred对象，它是jQuery中推崇的异步编程解决方案之一。Deferred对象为异步编程提供了一种可靠的状态和普遍存在的逐级响应处理方式，它可以在多个回调函数之间传递用于异步处理的操作和结果。

一个Deferred对象具有3个状态：pending（等待中）、resolved（已完成）、rejected（已失败）。除了状态，Deferred对象还提供了一些API，使得异步操作的结果可以被处理。Deferred对象可以通过 deferred.resolve() 和 deferred.reject() 方法显式的将状态改变为 resolved 和 rejected，而通过 deferred.notify() 方法可以用于传递处理进度。

Deferred对象的使用

在实际开发中，我们可以使用该对象来实现一些复杂的异步场景，基本使用方式为：

var deferred = $.Deferred();
// 异步代码...
deferred.resolve(result); // 成功回调
// 或者
deferred.reject(error); // 失败回调
// 最后调用 .promise() 方法，以使得 Deferred 对象的状态只能被修改一次
deferred.promise();

使用实例1：Ajax请求

下面通过一个Ajax请求的例子，来说明Deferred对象的使用方法及优势。

var ajaxDeferred = $.Deferred();

$.ajax({
    url: "http://api.example.com/",
    dataType: "json",
}).done(function(response){
    // 请求成功的回调
    ajaxDeferred.resolve(response.data); 
}).fail(function(error){
    // 请求失败的回调
    ajaxDeferred.reject(error.statusText); 
});

ajaxDeferred.promise().then(function(data){
    // 成功回调
    console.log(data);
}, function(error){
    // 失败回调
    console.log(error);
}).always(function(){
    // 总是执行的回调
    console.log("Ajax请求已完成");
});

在上面的例子中，我们首先声明了一个Deferred对象 ajaxDeferred，然后通过 $.ajax() 方法异步地请求了API。当请求成功时，我们通过 ajaxDeferred.resolve() 方法，将 Deferred 对象的状态切换为已完成（resolved）状态，并将请求响应数据作为参数传递给了 resolve() 方法。当请求失败时，我们通过 ajaxDeferred.reject() 方法，将 Deferred 对象的状态切换为已失败（rejected）状态，并将错误信息作为参数传递给了 reject() 方法。

最后，我们调用了 ajaxDeferred.promise().then() 方法，通过该方法可以设置成功回调、失败回调和总是执行的回调。

使用实例2：多个Ajax请求

除了单个请求的场景，Deferred对象还可以应用于多个请求的场景，以实现多个请求同时完成后，执行某些操作。

var ajax1 = $.ajax({
    url: "http://api.example.com/api1",
    dataType: "json"
});

var ajax2 = $.ajax({
    url: "http://api.example.com/api2",
    dataType: "json"
});

$.when(ajax1, ajax2).done(function(response1, response2){
    // 两个请求都成功的回调
    console.log(response1.data, response2.data);
}).fail(function(error){
    // 请求失败的回调
    console.log(error);
}).always(function(){
    // 总是执行的回调
    console.log("所有请求都已完成");
});

在上面的例子中，我们并行发起了两个Ajax请求，通过 $.when() 方法，将这两个 Deferred 对象传入，当两个 Deferred 对象的状态都是已完成的时候，$.when() 方法设置的成功回调才被触发，并将两个请求响应数据作为参数传递给了 done() 方法。如果有任意一个 Deferred 对象的状态是已失败的，则设置的失败回调被触发。最后，设置的总是执行的回调也会执行。