事實上，在此之前網上有很多文章在講jquery Deferred對象了，但是總喜歡把ajax和Deferred混在一起講，容易把人搞混。 when、done、promise、success、error、fail、then、resolve、reject、always這麼多方法不能揉在一起講，需要把他們捋一捋，哪些是Deferred對象的方法，哪些是ajax的語法糖，我們需要心知肚明。
先講$.Deferred
jquery用$.Deferred實現了Promise規範，$.Deferred是個什麼玩意呢？還是老方法，打印出來看看，先有個直觀印象：
var def = $.Deferred();
console.log(def);
輸出如下：
Deferred對象的基本用法如下，為了不與ajax混淆，我們依舊舉setTimeout的例子：
複製代碼
function runAsync(){
var def = $.Deferred();
// 做一些異步操作
setTimeout( function (){
console.log( '執行完成' );
def.resolve( '隨便什麼數據' );
}, 2000 );
return def;
}
runAsync().then( function (data){
console.log(data)
});
在runAsync函數中，我們首先定義了一個def對象，然後進行一個延時操作，在2秒後調用def.resolve()，最後把def作為函數的返回。調用runAsync的時候將返回def對象，然後我們就可以.then來執行回調函數。
是不是感覺和ES6的Promise很像呢？我們來回憶一下第一篇中ES6的例子：
複製代碼
function runAsync(){
var p = new Promise( function (resolve, reject){
// 做一些異步操作
setTimeout( function (){
console.log( '執行完成' );
resolve( '隨便什麼數據' );
}, 2000 );
});
return p;
}
runAsync()
區別在何處一看便知。由於jquery的def對象本身就有resolve方法，所以我們在創建def對象的時候並未像ES6這樣傳入了一個函數參數，是空的。在後面可以直接def.resolve()這樣調用。
這樣也有一個弊端，因為執行runAsync()可以拿到def對象，而def對像上又有resolve方法，那麼豈不是可以在外部就修改def的狀態了？比如我把上面的代碼修改如下：
複製代碼
var d = runAsync();
d.then( function (data){
console.log(data)
});
d.resolve( '在外部結束');
複製代碼
現象會如何呢？並不會在2秒後輸出“執行完成”，而是直接輸出“在外部結束”。因為我們在異步操作執行完成之前，沒等他自己resolve，就在外部給resolve了。這顯然是有風險的，比如你定義的一個異步操作並指定好回調函數，有可能被別人給提前結束掉，你的回調函數也就不能執行了。
怎麼辦？jquery提供了一個promise方法，就在def對像上，他可以返回一個受限的Deferred對象，所謂受限就是沒有resolve、reject等方法，無法從外部來改變他的狀態，用法如下：
複製代碼
function runAsync(){
var def = $.Deferred();
// 做一些異步操作
setTimeout( function (){
console.log( '執行完成' );
def.resolve( '隨便什麼數據' );
}, 2000 );
return def.promise(); // 就在這裡調用
}
複製代碼
這樣返回的對像上就沒有resolve方法了，也就無法從外部改變他的狀態了。這個promise名字起的有點奇葩，容易讓我們搞混，其實他就是一個返回受限Deferred對象的方法，與Promise規範沒有任何關係，僅僅是名字叫做promise罷了。雖然名字奇葩，但是推薦使用。
then的鍊式調用
既然Deferred也是Promise規範的實現者，那麼其他特性也必須是支持的。鍊式調用的用法如下：
複製代碼
var d = runAsync();
d.then( function (data){
console.log(data);
return runAsync2();
})
.then( function (data){
console.log(data);
return runAsync3();
})
.then( function (data){
console.log(data);
});
複製代碼
與我們第一篇中的例子基本一樣，可以參照。
done與fail
我們知道，Promise規範中，then方法接受兩個參數，分別是執行完成和執行失敗的回調，而jquery中進行了增強，還可以接受第三個參數，就是在pending狀態時的回調，如下：
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
除此之外，jquery還增加了兩個語法糖方法，done和fail，分別用來指定執行完成和執行失敗的回調，也就是說這段代碼：
複製代碼
d.then( function (){
console.log( '執行完成' );
}, function (){
console.log( '執行失敗' );
});
複製代碼
與這段代碼是等價的：
複製代碼
d.done( function (){
console.log( '執行完成' );
})
.fail( function (){
console.log( '執行失敗' );
});
複製代碼
always的用法
jquery的Deferred對像上還有一個always方法，不論執行完成還是執行失敗，always都會執行，有點類似ajax中的complete。不贅述了。
$.when的用法
jquery中，還有一個$.when方法來實現Promise，與ES6中的all方法功能一樣，並行執行異步操作，在所有的異步操作執行完後才執行回調函數。不過$.when並沒有定義在$.Deferred中，看名字就知道，$.when，它是一個單獨的方法。與ES6的all的參數稍有區別，它接受的並不是數組，而是多個Deferred對象，如下：
複製代碼
$.when(runAsync(), runAsync2(), runAsync3())
.then( function (data1, data2, data3){
console.log( '全部執行完成' );
console.log(data1, data2, data3);
});
複製代碼
jquery中沒有像ES6中的race方法嗎？就是以跑的快的為準的那個方法。對的，jquery中沒有。
以上就是jquery中Deferred對象的常用方法了，還有一些其他的方法用的也不多，乾脆就不記它了。接下來該說說ajax了。
ajax與Deferred的關係
jquery的ajax返回一個受限的Deferred對象，還記得受限的Deferred對象吧，也就是沒有resolve方法和reject方法，不能從外部改變狀態。想想也是，你發一個ajax請求，別人從其他地方給你取消掉了，也是受不了的。
既然是Deferred對象，那麼我們上面講到的所有特性，ajax也都是可以用的。比如鍊式調用，連續發送多個請求：
複製代碼
req1 = function (){
return $.ajax( /* ... */ );
}
req2 = function (){
return $.ajax( /* ... */ );
}
req3 = function (){
return $.ajax( /* ... */ );
}
req1().then(req2).then(req3).done( function (){
console.log( '請求發送完畢' );
});
複製代碼
明白了ajax返回對象的實質，那我們用起來就得心應手了。
success、error與complete
這三個方法或許是我們用的最多的，使用起來是這樣的：
$.ajax( /* ... */ )
.success( function (){ /* ... */ })
.error( function (){ /* ... */ })
.complete( function (){ /* ... */ })
分別表示ajax請求成功、失敗、結束的回調。這三個方法與Deferred又是什麼關係呢？其實就是語法糖，success對應done，error對應fail，complete對應always，就這樣，只是為了與ajax的參數名字上保持一致而已，更方便大家記憶，看一眼源碼：
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
complete那一行那麼寫，是為了減少重複代碼，其實就是把done和fail又調用一次，與always中的代碼一樣。deferred.promise( jqXHR )這句也能看出，ajax返回的是受限的Deferred對象。
jquery加了這麼些個語法糖，雖然上手門檻更低了，但是卻造成了一定程度的混淆。一些人雖然這麼寫了很久，卻一直不知道其中的原理，在面試的時候只能答出一些皮毛，這是很不好的。這也是我寫這篇文章的緣由。
jquery中Deferred對象涉及到的方法很多，本文盡量分門別類的來介紹，希望能幫大家理清思路。總結一下就是：$.Deferred實現了Promise規範，then、done、fail、always是Deferred對象的方法。$.when是一個全局的方法，用來並行運行多個異步任務，與ES6的all是一個功能。ajax返回一個Deferred對象，success、error、complete是ajax提供的語法糖，功能與Deferred對象的done、fail、always一致。
沒有留言:
張貼留言