欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題

 更新時間:2015年11月13日 09:26:09   投稿:mrr  
Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個編程范式,一個Promise即表示任務(wù)結(jié)果,無論該任務(wù)是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題,需要的朋友參考下

Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個編程范式,一個Promise即表示任務(wù)結(jié)果,無論該任務(wù)是否完成。

在一些現(xiàn)代瀏覽器中已經(jīng)提供了原生的Promise對象,其遵循Promise/A+標(biāo)準(zhǔn)。在jQuery1.5+,提供了$.Deferred(其可以被轉(zhuǎn)化為promise對象)。很多知名的框架中,也提供了promise對象。promise對象在javascript中已經(jīng)是一種很重要的模式,它在解決異步問題時表現(xiàn)出的優(yōu)雅,正是javascript所需要的。以下以jQuery中的$.Deferred對象為例,來看一下promise對象是如何處理異步問題。關(guān)于$.Deferred對象,可以到j(luò)Query官網(wǎng)查看,這里就不贅述了。

一、封裝異步操作

  首先,我們以加載圖片為例,看以下代碼:

//加載圖片函數(shù)
var loadImg = function(url){
  var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功則觸發(fā)deferred.resolve
    deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
    //失敗則觸發(fā)deferred.reject
  deferred.reject( e );
 } ;
  //返回promise對象
 return deferred.promise() ;
} ;
//請求圖片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//請求成功
request.done(function(img){
  //code
}) ;
//可以注冊多個回調(diào),當(dāng)請求成功時,會按注冊的順序執(zhí)行,fail和always也有此性質(zhì)
request.done(function(img){
  // code
});
//請求失敗
request.fail(function(){
  // code
}) ;
//請求完畢
request.always(function(){
  //code
});

以上的代碼,我封裝了圖片加載的操作,將他們委托給$.Deferred,最后生成一個promise返回。使用這樣的方式,相比用對外暴露回調(diào)的方式,顯得更干凈、更清晰。這么做的另一個更重要的原因是,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執(zhí)行成功時 連接request1
  var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
  return request1 ;
},function(e){
  //request執(zhí)行失敗時 連接request2
  var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
  return request2 ;
});
//request執(zhí)行并且request1或request2成功執(zhí)行時
request3.done(function(done){
  //code
}) ;

 promise對象提供了then的方法,它接受兩個回調(diào):onResolve和onReject,在回調(diào)中返回promise,就可以完成promise之間的連接。通過這種方式,可以使異步操作串行的執(zhí)行。

  同時,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這個函數(shù),它可以接受n個promise對象為參數(shù),它是將promise的執(zhí)行結(jié)果連接在一起。使用這種方式,多個異步操作可以并行執(zhí)行。

三、The End

  這里的代碼是以加載圖片為例,同樣的做法可以應(yīng)用到其他的異步操作中去。比如jQuery中的$.ajax、$.fn.animate,調(diào)用它們返回的就是promise。在node端,也可以把一些異步操作(讀數(shù)據(jù)庫、讀文件等)封裝成promise。繼而對多個promise實現(xiàn)合并的操作,使其串行或者并行執(zhí)行。

附:deferred對象

  deferred除了用于轉(zhuǎn)化promise對象外,本身也是個很有用的對象。它除了提供像promise對象的那些方法和屬性外,還有notify函數(shù)和progress函數(shù),這兩個函數(shù)在實現(xiàn)進(jìn)度條和瀑布流的時候,有很大的用處。

   在實現(xiàn)進(jìn)度條時,resolve和done函數(shù)可以用于定義進(jìn)度條讀取到100%時的觸發(fā)時機(jī)和觸發(fā)邏輯,notify和progress函數(shù)可以用于定義進(jìn)度條在讀取中的觸發(fā)時機(jī)和觸發(fā)邏輯。reject和fail函數(shù)可以用于定義進(jìn)度讀取失敗時的觸發(fā)時機(jī)和觸發(fā)邏輯。

   在實現(xiàn)瀑布流時,resolve和done函數(shù)可以用于定義當(dāng)數(shù)據(jù)已經(jīng)全部加載到頁面的觸發(fā)時機(jī)和觸發(fā)邏輯,notify和progress函數(shù)可以用于定義瀑布流讀取下一頁的觸發(fā)時機(jī)和觸發(fā)邏輯。

相關(guān)文章

最新評論