JQuery Deferred 物件剖析-js教程-PHP中文網

JQuery 中利用 Deferred 物件提供類似 ES2016(aka. es7) 中 Promise 的功能。
JQuery 中的 AJAX 請求函數傳回的就是 Deferred 物件。
透過使用 Defered 讓非同步呼叫更加可讀，實現進階的用法(指定多個回呼函數/等待多個 AJAX 請求)。

JQuery中傳統的AJAX請求

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

登入後複製

使用Deferred 的AJAX請求

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

登入後複製

這篇文章會著重分析Deferred/Promise 的狀態變化過程，並講述Deferred 物件在實際編碼中的應用。

建立Deferred

使用者可以使用Deferred 函數來建立Deferred 物件

1	`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 改變他們的狀態

1	`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 方法

1	`var` `d1 = $.Deferred();// 注册回调函数d1.then(function(data){console.log('First function: ' + data.state);}, function(err){console.log('Second function: ' + err);});// 做一些耗时的操作// 改变 deferred 对象状态为 resolved// 回调函数将被调用，打印信息：First function: successedd1.resolve({state: 'successed'});`

登入後複製

使用then 和reject 方法

1	`var` `d2 = $.Deferred();// 注册回调函数d2.then(function(data){console.log('First function: ' + data.state);}, function(err){console.log('Second function: ' + err.state);});// 改变 deferred 对象状态为 rejected// 回调函数将被调用，打印信息：Second function: failedd2.reject({state: 'failed'});`

登入後複製

使用done 方法

使用done 方法可以指定當deferred 物件狀態變成resolved 時呼叫的函數

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

登入後複製

使用fail 方法

使用fail 方法可以指定當deferred 物件狀態變成rejected 時呼叫的函數

1	`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 來指定多個

1	`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 方法取得它本身

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

登入後複製

then 和done/fail 的差異

done/fail 回傳的是Deferred物件本身

then 方法傳回的是一個新的Promise 物件

使用done/fail 方法傳回Deferred 物件

1	`var` `d1 = $.Deferred();var` `d2 = d1.done();var` `d3 = d1.fail();console.log(d1 === d2);` `// trueconsole.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 对象的状态才会发生相应的变化

var deferred = $.Deferred();var new_promise = deferred.then();deferred.reject('reject')console.log(`d1 state: ${deferred.state()}`); // rejectedconsole.log(`new_promise state: ${new_promise.state()}`); // pendingsetTimeout(`console.log("new_promise state after 100 miliseconds: ${new_promise.state()}")`, 100); // 100 毫秒后， new_promise 的状态变成了 rejected

登入後複製

发生了什么

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 对象的状态变化。以及如何给回调函数传递参数

var d1 = $.Deferred();function fun1(data){console.log(`p2 state in fun1: ${p2.state()}`);console.log(`data in fun1: ${data}`);return data * 3;}function fun2(error){return 'new data from fun2';}var p2 = d1.then(fun1, fun2);p2.done(data=>{console.log(`p2 state in done: ${p2.state()}`);console.log(`data in done: ${data}`);});d1.resolve(10);/* 屏幕输出为p2 state in fun1: pendingdata in fun1: 10p2 state in done: resolveddata in done: 30*/

登入後複製

在网页中使用 Deferred

自定义函数

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

function say_hello(){// 创建 Deferred 对象var deferred = $.Deferred();// 做一些耗时的操作，操作完成后调用 resolve 或者 reject 函数结束。// 我们用 setTimeout 函数模拟一段耗时操作：// 等待五秒钟后，调用 Deferred 的 resolve 方法来改变状态setTimeout(deferred.resolve.bind(deferred, 'hello world'), 5000);// 也可以使用 AJAX 操作/* $.getJSON('/api/names').done(data=>{ if(data.state == 'successed'){ deferred.resolve(data); }else{ deferred.reject(data); } }); */return deferred.promise(); // 返回 promise 对象，防止外界对 Deferred 对象的状态进行改变}// 调用 say_hello函数，并使用 done/fail/then 方法注册回调函数say_hello().done(msg=>{console.log(msg);});

登入後複製

$.when

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

// 创建一个函数，如果参数大于500，则将内置的 Deferred 对象状态变为 resolved// 如果参数小于500，则将内置的 Deferred 对象状态变为 rejectedfunction 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); // 9console.log(d2); // 6console.log(d3); // 10});$.when(get_promise(800), get_promise(900), get_promise(1000)).done((...datas)=>{console.log(datas); // [8, 9, 10]});

登入後複製

以上是JQuery Deferred 物件剖析的詳細內容。更多資訊請關注PHP中文網其他相關文章！