以jQuery中$.Deferred物件為例講解promise物件是如何處理非同步問題_jquery

Promises是一種令程式碼異步行為更優雅的抽象，它很有可能是JavaScript的下一個程式設計範式，一個Promise即表示任務結果，無論該任務是否完成。

在一些現代瀏覽器中已經提供了原生的Promise對象，其遵循Promise/A 標準。在jQuery1.5 ，提供了$.Deferred（其可以被轉換為promise物件）。在許多知名的框架中，也提供了promise物件。 promise物件在javascript中已經是一種很重要的模式，它在解決非同步問題時所表現出的優雅，正是javascript所需要的。以下以jQuery中的$.Deferred物件為例，來看看promise物件是如何處理非同步問題。關於$.Deferred對象，可以到jQuery官網查看，這裡就不贅述了。

一、封裝非同步操作

　　首先，我們以載入圖片為例，看以下程式碼：

//加载图片函数
var loadImg = function(url){
　　var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve
　　　　deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
　　　 //失败则触发deferred.reject
  deferred.reject( e );
 } ;
　　//返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){
　　//code
}) ;
//可以注册多个回调，当请求成功时，会按注册的顺序执行，fail和always也有此性质
request.done(function(img){
　　// code
});
//请求失败
request.fail(function(){
　　// code
}) ;
//请求完毕
request.always(function(){
　　//code
});

以上的程式碼，我封裝了圖片載入的操作，將他們委託給$.Deferred，最後產生一個promise回傳。使用這樣的方式，相較於用對外暴露回調的方式，顯得更乾淨、更清晰。這麼做的另一個更重要的原因是，promise的連結。

二、promise的連接

　　我們還是以上面圖片載入的程式碼為例，來看看如何做promise的連接，看以下程式碼：

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
　　//code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){
　　//request执行成功时 连接request1
　　var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request1 ;
},function(e){
　　//request执行失败时 连接request2
　　var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
　　return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){
　　//code
}) ;

 promise物件提供了then的方法，它接受兩個回呼：onResolve和onReject，在回呼中返回promise，就可以完成promise之間的連接。透過這種方式，可以使非同步操作串列的執行。

　　同時，jQuery也提供了另一種連接方式，看程式碼：

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
　　//code
}) ;

　　jQuery中提供了$.when這個函數，它可以接受n個promise物件為參數，它是將promise的執行結果連接在一起。使用這種方式，多個非同步操作可以並行執行。

三、The End

　　這裡的程式碼是以載入圖片為例，同樣的做法可以應用到其他的非同步操作中去。例如jQuery中的$.ajax、$.fn.animate，呼叫它們回傳的就是promise。在node端，也可以把一些非同步操作（讀取資料庫、讀取檔案等）封裝成promise。繼而對多個promise實現合併的操作，使其串列或並行執行。

附：deferred物件

　　deferred除了用來轉換promise物件外，本身也是個很有用的物件。它除了提供像promise物件的那些方法和屬性外，還有notify函數和progress函數，這兩個函數在實現進度條和瀑布流的時候，有很大的用處。

   在實現進度條時，resolve和done函數可以用來定義進度條讀取到100%時的觸發時機和觸發邏輯，notify和progress函數可以用來定義進度條在讀取中的觸發時機和觸發邏輯。 reject和fail函數可以用來定義進度讀取失敗時的觸發時機和觸發邏輯。

   在實現瀑布流時，resolve和done函數可以用來定義當資料已經全部載入到頁面的觸發時機和觸發邏輯，notify和progress函數可以用來定義瀑布流讀取下一頁的觸發時機和觸發邏輯。