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

JavaScript異步回調(diào)的Promise模式封裝實(shí)例

 更新時(shí)間:2014年06月07日 09:27:15   作者:  
這篇文章主要介紹了JavaScript異步回調(diào)的Promise模式封裝實(shí)例,本文通過分析easyjs的源碼得出,實(shí)例均參考easyjs,需要的朋友可以參考下

網(wǎng)頁的交互越來越復(fù)雜,JavaScript 的異步操作也隨之越來越多。如常見的 ajax 請(qǐng)求,需要在請(qǐng)求完成時(shí)響應(yīng)操作,請(qǐng)求通常是異步的,請(qǐng)求的過程中用戶還能進(jìn)行其他的操作,不會(huì)對(duì)頁面進(jìn)行阻塞,這種異步的交互效果對(duì)用戶來說是挺有友好的。但是對(duì)于開發(fā)者來說,要大量處理這種操作,就很不友好了。異步請(qǐng)求完成的操作必須預(yù)先定義在回調(diào)函數(shù)中,等到請(qǐng)求完成就必須調(diào)用這個(gè)函數(shù)。這種非線性的異步編程方式會(huì)讓開發(fā)者很不適應(yīng),同時(shí)也帶來了諸多的不便,增加了代碼的耦合度和復(fù)雜性,代碼的組織上也會(huì)很不優(yōu)雅,大大降低了代碼的可維護(hù)性。情況再?gòu)?fù)雜點(diǎn),如果一個(gè)操作要等到多個(gè)異步 ajax 請(qǐng)求的完成才能進(jìn)行,就會(huì)出現(xiàn)回調(diào)函數(shù)嵌套的情況,如果需要嵌套好幾層,那你就只能自求多福了。
先看看下面這個(gè)常見的異步函數(shù)。

復(fù)制代碼 代碼如下:

var showMsg = function(){
    setTimeout(function(){
        alert( 'hello' );
    }, 5000 );
};

如果要給該函數(shù)添加回調(diào),通常會(huì)這么干。

復(fù)制代碼 代碼如下:

var showMsg = function( callback ){
    setTimeout(function(){
        alert( 'hello' );
        // 此處添加回調(diào)
        callback();
    }, 5000 );
};

如果是使用 easy.js 的 Promise,添加回調(diào)的方法就會(huì)優(yōu)雅多了,前提是需要將原函數(shù)封裝成一個(gè) promise 實(shí)例。

復(fù)制代碼 代碼如下:

var showMsg = function(){
    // 構(gòu)造promise實(shí)例
    var promise = new E.Promise();

    setTimeout(function(){
        alert( 'hello' );

        // 改變promise的狀態(tài)
        promise.resolve( 'done' );
    }, 5000 );

    // 返回promise實(shí)例
    return promise;
};

將一個(gè)普通的函數(shù)封裝成一個(gè) promise 實(shí)例,有3個(gè)關(guān)鍵步驟,第一步是在函數(shù)內(nèi)部構(gòu)造一個(gè) promise 實(shí)例,第二步是部署函數(shù)執(zhí)行完去改變 promise 的狀態(tài)為已完成,第三步就是返回這個(gè) promise 實(shí)例。每個(gè) promise 實(shí)例都有3種狀態(tài),分別為 pending(未完成)、resolved(已完成,成功)、rejected(已拒絕,失敗)。下面再來看看如何添加回調(diào)。

復(fù)制代碼 代碼如下:

showMsg().then(function( str ){
    // 回調(diào)添加到這里來了
    callback( str );
});

這樣就將回調(diào)函數(shù)和原來的異步函數(shù)徹底的分離了,從代碼組織上看,優(yōu)雅了很多。resolve 接受一個(gè)參數(shù),該參數(shù)就可以輕松實(shí)現(xiàn)將數(shù)據(jù)傳送給使用 then 方法添加的回調(diào)中。
對(duì)于 ajax 請(qǐng)求,easy.js 直接將 ajax 方法封裝成了 promise 對(duì)象,可以直接添加 then 方法來回調(diào)。

復(fù)制代碼 代碼如下:

E.ajax({
    url : 'test1.php',
    type : 'GET'
})
.then(function(){
    // 添加請(qǐng)求成功的回調(diào)
}, function(){
    // 添加請(qǐng)求失敗的回調(diào)
});

then 方法接受2個(gè)函數(shù)作為參數(shù),第一個(gè)函數(shù)是已完成的回調(diào),第二個(gè)就是已失敗的回調(diào)。
如果有上面提到的多個(gè) ajax 請(qǐng)求的情況呢?那么就要用到 when 這個(gè)方法了。該方法可以接受多個(gè) promise 實(shí)例作為參數(shù)。

復(fù)制代碼 代碼如下:

var requests = E.when(E.ajax({
    url : 'test1.php',
    type : 'GET'
}), E.ajax({
    url : 'test2.php',
    type : 'GET'
}));

requests.then(function( arg1, arg2 ){
    console.log( 'success:' + arg1[0] + arg2[0] );
}, function( arg1, arg2 ){
    console.log( 'failure:' + arg1 + arg2  );
});

when 方法是將多個(gè) promise 實(shí)例存到一個(gè)數(shù)組中,等到該數(shù)組的所有 promise 實(shí)例都是已完成狀態(tài)才去執(zhí)行已完成的回調(diào),一旦有一個(gè)實(shí)例是已拒絕的狀態(tài),則立即執(zhí)行已拒絕的回調(diào)。

Promise 模式是 CommonJS 的規(guī)范之一。很多主流的 JavaScript 庫(kù)都有相應(yīng)的實(shí)現(xiàn),如 jQuery 和 Dojo 中,都有 Deferred 去實(shí)現(xiàn)這些功能。在這里還是要吐槽下 jQuery 的 Deferred,撇開其內(nèi)部使用,這應(yīng)該用戶使用率最低的一個(gè)模塊了,這和其較復(fù)雜的使用方式有一定的關(guān)系。

相關(guān)文章

  • flexigrid 參數(shù)說明

    flexigrid 參數(shù)說明

    flexigrid 參數(shù)說明,需要的朋友可以參考下。
    2010-11-11
  • 詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)

    詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)

    這篇文章主要介紹了詳解微信小程序工程化探索之webpack實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換

    微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換,不滑動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 微信小程序使用GoEasy實(shí)現(xiàn)websocket實(shí)時(shí)通訊

    微信小程序使用GoEasy實(shí)現(xiàn)websocket實(shí)時(shí)通訊

    這篇文章主要介紹了微信小程序使用GoEasy實(shí)現(xiàn)websocket實(shí)時(shí)通訊的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-05-05
  • js使用post 方式打開新窗口

    js使用post 方式打開新窗口

    這篇文章主要介紹了js使用post 方式打開新窗口的相關(guān)資料,需要的朋友可以參考下
    2015-02-02
  • 詳解JavaScript 中的批處理和緩存

    詳解JavaScript 中的批處理和緩存

    這篇文章主要介紹了詳解JavaScript 中的批處理和緩存,幫助大家完成需求,更好的理解和使用JavaScript,感興趣的朋友可以了解下
    2020-11-11
  • 詳解JavaScript的Date對(duì)象(制作簡(jiǎn)易鐘表)

    詳解JavaScript的Date對(duì)象(制作簡(jiǎn)易鐘表)

    這篇文章主要為大家詳細(xì)介紹了JavaScript的Date對(duì)象,和大家分享如何制作簡(jiǎn)易鐘表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2015-12-12
  • javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子

    javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子

    javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子,需要的朋友可以參考一下
    2013-03-03
  • js?通過Object.defineProperty()?定義和控制對(duì)象屬性

    js?通過Object.defineProperty()?定義和控制對(duì)象屬性

    這篇文章主要介紹了js?通過Object.defineProperty()?定義和控制對(duì)象屬性,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-08-08
  • JS解密入門 最終變量劫持

    JS解密入門 最終變量劫持

    看到我的前幾篇文章的朋友應(yīng)該知道,前面的是10進(jìn)制,直覺解就行了,不過下面有個(gè)處理函數(shù),你用10進(jìn)制解密出來之后還要去分析函數(shù)的功能,很不合算。
    2008-06-06

最新評(píng)論