快捷導(dǎo)航

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 請求，需要在請求完成時(shí)響應(yīng)操作，請求通常是異步的，請求的過程中用戶還能進(jìn)行其他的操作，不會(huì)對頁面進(jìn)行阻塞，這種異步的交互效果對用戶來說是挺有友好的。但是對于開發(fā)者來說，要大量處理這種操作，就很不友好了。異步請求完成的操作必須預(yù)先定義在回調(diào)函數(shù)中，等到請求完成就必須調(diào)用這個(gè)函數(shù)。這種非線性的異步編程方式會(huì)讓開發(fā)者很不適應(yīng)，同時(shí)也帶來了諸多的不便，增加了代碼的耦合度和復(fù)雜性，代碼的組織上也會(huì)很不優(yōu)雅，大大降低了代碼的可維護(hù)性。情況再復(fù)雜點(diǎn)，如果一個(gè)操作要等到多個(gè)異步 ajax 請求的完成才能進(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)中。
對于 ajax 請求，easy.js 直接將 ajax 方法封裝成了 promise 對象，可以直接添加 then 方法來回調(diào)。

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

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

then 方法接受2個(gè)函數(shù)作為參數(shù)，第一個(gè)函數(shù)是已完成的回調(diào)，第二個(gè)就是已失敗的回調(diào)。
如果有上面提到的多個(gè) ajax 請求的情況呢？那么就要用到 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 庫都有相應(yīng)的實(shí)現(xiàn)，如 jQuery 和 Dojo 中，都有 Deferred 去實(shí)現(xiàn)這些功能。在這里還是要吐槽下 jQuery 的 Deferred，撇開其內(nèi)部使用，這應(yīng)該用戶使用率最低的一個(gè)模塊了，這和其較復(fù)雜的使用方式有一定的關(guān)系。

您可能感興趣的文章: