JQuery Deferred 对象剖析

喜欢ヅ旅行 2021-12-22 05:09 260阅读 0赞

JQuery 中利用 Deferred 对象提供类似 ES2016(aka. es7) 中 Promise 的功能。  
JQuery 中的 AJAX 请求函数返回的就是 Deferred 对象。  
通过使用 Defered 让异步调用更加可读，实现高级的用法(指定多个回调函数/等待多个 AJAX 请求)。

*  JQuery中传统的AJAX请求

$.getJSON('url', data=>{
        // 处理返回的JSON数据
        console.log(data);
    }, err=>{
        // 处理出错信息
        console.log(err.status);
    })

*  使用 Deferred 的AJAX请求

$.getJSON('url').done(data=>{
        console.log(data);
    }).fail(err=>{
        console.log(err.status);
    });

这篇文章会着重分析 Deferred/Promise 的状态变化过程，并讲述 Deferred 对象在实际编码中的应用。

## 创建 Deferred ##

用户可以使用 `Deferred` 函数来创建 Deferred 对象

var d1 = $.Deferred();
    console.log(d1.state());

## Deferred 对象的状态 ##

Deferred 对象有以下三种状态

*  pending
 *  rejected
 *  resolved

Deferred 对象可以从pending状态转换到rejected状态或者resolved.  
这种状态的转换是单向的，也就是说一旦Deferred对象的状态是 rejected/resolved, 对象的状态将不可变。

### 得到 Deferred 对象的状态 ###

JQuery 提供了三个函数来查看/修改Deferred对象的状态:

*  `deferred.state()`, 返回一个字符串表示当前 Deferred 对象的状态
 *  `deferred.reject()`, 将对象的状态设置为 rejected
 *  `deferred.resolve()`, 将对象的状态设置为 resolved

下面的代码定义了两个 Deferred 对象，并分别使用 resolve/reject 改变他们的状态

let d1 = $.Deferred();
    console.log(d1.state()); // "pending"
    d1.resolve();
    console.log(d1.state()); // "resolved"
    
    let d2 = $.Deferred();
    console.log(d2.state()); // "pending"
    d2.reject();
    console.log(d2.state()); // "rejected"

## Deferred 回调函数 ##

JQuery 提供了方法来指定当 Deferred 对象状态发生变化时的回调函数

### 指定回调函数 ###

#### 使用 then 方法 ####

> then 方法接受两个函数作为参数，当对象的状态变成 resolved, 第一个函数会被调用。  
> 当对象的状态变成 rejected, 第二个函数会被调用。
> 
> 第一个函数接受一个参数，该参数是 `defered.resolve` 函数被调用时传递的第一个参数。  
> 第二个函数接受一个参数，该参数是 `defered.reject` 函数被调用时传递的第一个参数。

*  使用 then 和 resolve 方法

*  使用 then 和 reject 方法

#### 使用 done 方法 ####

> 使用 done 方法可以指定当 deferred 对象状态变成 resolved 时调用的函数

var deferred = $.Deferred();
    deferred.done(function(data){
        console.log('Done: ' + data.state);
    });
    
    deferred.resolve({state: 'successed'});

#### 使用 fail 方法 ####

> 使用 fail 方法可以指定当 deferred 对象状态变成 rejected 时调用的函数

var deferred = $.Deferred();
    deferred.fail(function(err){
        console.log('Fail: ' + err.state);
    })
    deferred.resolve({state: 'failed'});

#### 使用 always 方法 ####

> always 方法接受一个函数作为参数，只要 Deferred 对象的状态发生变化，该函数都会被调用。

### 链式调用 ###

因为 then/done/fail 函数返回的仍然是类 Deferred 对象，所以我们可以使用他们来指定多个回调函数.  
下面这个例子用 done/fail 来指定多个

var deferred = $.Deferred();
    deferred.done(data=>{
        // Do something
    }).done(data=>){
        // Do something
    }.fail(err=>{
        // Handle the error
    }).always(()=>{
        // Clean the environment
    })

## Promise 对象 ##

JQuery 还提供了 Promise 对象，可以通过 Deferred 对象的 `promise` 方法来获取该对象的 Promise 对象。=  
Promise 对象有以下特点：

*  Promise 对象没有 `reject`/`resolve` 方法
 *  Promise 对象的状态跟 Deferred 对象保持一致
 *  Promise 对象通过 `state()` 方法获取跟它绑定的 Deferred 的状态
 *  Proimse 对象也可以使用 `then`/`done`/`fail` 方法来指定回调函数
 *  Promise 可以调用 promise 方法获取它自身

var deferred = $.Deferred();
    var promise = deferred.promise();
    
    deferred.reject();
    console.log(deferred.state());  // rejected
    console.log(promise.state());   // rejected
    console.log(promise.promise() === promise);   // true, Promise 对象的 promis() 方法返回的是它自己

## then 和 done/fail 的差异 ##

done/fail 返回的是 Deferred 对象自身  
then 方法返回的是一个新的 Promise 对象

### 使用 done/fail 方法返回 Deferred 对象 ###

var d1 = $.Deferred();
    var d2 = d1.done();
    var d3 = d1.fail();
    
    console.log(d1 === d2); // true
    console.log(d1 === d3); // true

### 使用 then 方法返回 Promise 对象 ###

使用 then 方法我们需要明白的几个关键点是：

#### 方法返回的是 Promise 对象，该对象没有 resolve/reject 方法。 ####

> Deferred 对象的 `then` 方法， 会创建一个新的 Deferred 对象，并返回新 Deferred 对象的 Promise 对象。  
> 而且 `then` 方法返回的对象 跟 Deferred 对象的 Promise 对象不相等， 多次调用 then 对象会产生多个 Deferred 对象。  
> 下面的例子对比了多次调用 then 方法产生的 Promise 对象

var d1 = $.Deferred();
    var p2 = d1.then();  // 调用 then 方法返回一个 Promise 对象
    var p3 = d1.then();  // 调用 then 方法返回一个新的 Promise 对象
    
    console.log('reject' in d1);       // false, 查看 then 方法返回的对象中是否有 reject 方法
    console.log('reject' in p2);       // false, 查看 then 方法返回的对象中是否有 reject 方法
    console.log(p2 === d1);            // false, 检查 d1 是否与 p2 相等
    console.log(p2 === d1.promise());  // false, 查看 d1 的 promise 是否与 p2 相等
    console.log(p2 === p3);            // false, p2 和 p3 的值不同

#### Deferred 对象的状态发生改变后，then 方法产生的 Promise 对象的状态不会立即发生变化 ####

> Deferred 对象状态发生变化后， 等待一段时间后 then 方法产生的 Promise 对象的状态才会发生相应的变化

#### 发生了什么 ####

> Deferred 对象的状态发生改变后，then 方法产生的 Promise 对象的状态并没有立即发生变化， 而是等待了一段时间后才改变。  
> 这段时间内，发生了什么那？  
> 我们以调用 Deferred 对象的 resolve 方法作为例子来说明。 调用 reject 方法的情况与此类似。

*  首先假设我们构造了Deferred 对象 d1
 *  然后调用 then 方法，并且传入两个函数作为参数 fun1, fun2： `var p2 = d1.then(fun1, fun2)`
 *  调用 `d1.resolve(data)` 方法将 d1 的状态设置为 resolved, 此时d1 的状态是 resolved, p2 的状态是 pending
 *  fun1 会被调用, 参数为 `d1.resolve` 方法的参数: `var new_data = fun1(data)`
 *  假设 p2 对应的 Deferred 对象是 d2.
 *  d2 的 resolve 方法会被调用， 参数为 fun1 的返回值: `d2.resolve(new_data)`
 *  p2 的状态变为 resolved
 *  p2 的回调函数会被调用

下面的代码展示了 then 方法产生的 Promise 对象的状态变化。以及如何给回调函数传递参数

## 在网页中使用 Deferred ##

### 自定义函数 ###

明白了 Deferred 的原理，我们就可以使用 Deferred.  
下面一段代码定义了一个函数， 在函数中定义了一些耗时的操作。  
函数返回 Promise 对象， 可以使用 done/fail/then 注册回调函数

### $.when ###

跟 ES2016 中 `Prmomise.all` 函数类似。  
JQuery 提供了 `when` 函数， 它可以接受多个 Deferred/Promise 对象作为参数。并返回一个 Promise 对象。  
新的 Promise 对象会等待参数中所有的对象状态变为 resolved/reject。  
如果参数中任何一个对象的状态变为 rejected, 那么 Promise 对象的状态变为 rejected。 否则变为 resolved。

// 创建一个函数，如果参数大于500， 则将内置的 Deferred 对象状态变为 resolved
    // 如果参数小于500， 则将内置的 Deferred 对象状态变为 rejected
    function get_promise(delay){
        // 创建 Deferred 对象
        var deferred = $.Deferred();
        if(delay > 500){
            setTimeout(deferred.resolve.bind(deferred, delay/100), delay);
        }else{
            setTimeout(deferred.reject.bind(deferred, delay/100), delay);
        }
        return deferred.promise();  // 返回 promise 对象
    }
    
    // 如果任一参数状态转变为 rejected, when 函数产生的 promise 对象状态会理解变为 rejected。
    // 并将第一个 Deferred 对象的错误信息传递给回调函数
    $.when(get_promise(800), get_promise(100), get_promise(300)).fail(error=>{
        console.log(error); // 1
    });
    // 否则 when 函数会等待所有的 Deferred 对象状态变为 resolved, 并将所有 Deferred 对象的返回值依次传递给回调函数
    $.when(get_promise(900), get_promise(600), get_promise(1000)).done((d1, d2, d3)=>{
        console.log(d1); // 9
        console.log(d2); // 6
        console.log(d3); // 10
    });
    
    $.when(get_promise(800), get_promise(900), get_promise(1000)).done((...datas)=>{
        console.log(datas); // [8, 9, 10]
    });

转载请注明出处： [http://www.cnblogs.com/zf-l/p/jq\_deferred.html][http_www.cnblogs.com_zf-l_p_jq_deferred.html]

转载于:https://www.cnblogs.com/zf-l/p/jq\_deferred.html

[http_www.cnblogs.com_zf-l_p_jq_deferred.html]: http://www.cnblogs.com/zf-l/p/jq_deferred.html