首頁 > web前端 > js教程 > JavaScript非同步回呼的Promise模式封裝實例_javascript技巧

JavaScript非同步回呼的Promise模式封裝實例_javascript技巧

WBOY
發布: 2016-05-16 16:45:40
原創
1280 人瀏覽過

網頁的互動越來越複雜,JavaScript 的非同步操作也隨之越來越多。如常見的ajax 請求,需要在請求完成時響應操作,請求通常是異步的,請求的過程中用戶還能進行其他的操作,不會對頁面進行阻塞,這種異步的交互效果對用戶來說是挺有友善的。但是對於開發者來說,要大量處理這種操作,就很不友善了。非同步請求完成的操作必須預先定義在回呼函數中,等到請求完成就必須呼叫這個函數。這種非線性的非同步程式設計方式會讓開發者很不適應,同時也帶來了許多的不便,增加了程式碼的耦合度和複雜性,程式碼的組織上也會很不優雅,大大降低了程式碼的可維護性。情況再複雜點,如果一個操作要等到多個非同步 ajax 請求的完成才能進行,就會出現回呼函數嵌套的情況,如果需要嵌套好幾層,那你就只能自求多福了。
先看看下面這個常見的非同步函數。

複製程式碼 程式碼如下:

var showMsg = function(>

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


如果要給該函數加上回調,通常會這麼幹。

程式碼如下:


var showMsgTime (function(){
        alert( 'hello' );
        // 此處新增回呼
   🎜>


如果是使用 easy.js 的 Promise,加入回呼的方法就會優雅多了,前提是需要將原函數封裝成一個 promise 實例。


複製程式碼 程式碼如下:var showMsg = function(>
var showMsg = function(){建構promise實例
    var promise = new E.Promise();

    setTimeout(function(){
   mise的狀態
        promise.resolve( 'done' );
    }, 5000 );

    // 返回promise 🎜 >
將一個普通的函數封裝成一個promise 實例,有3個關鍵步驟,第一步是在函數內部建構一個promise 實例,第二步是部署函數執行完去改變promise 的狀態為已完成,第三步就是回傳這個promise 實例。每個 promise 實例都有3種狀態,分別為 pending(未完成)、resolved(已完成,成功)、rejected(已拒絕,失敗)。下面再來看看如何加入回調。





複製程式碼

程式碼如下:

showMunction().then(function( str. 🎜>    // 回呼加到這裡來了    callback( str );}); 這樣就將回呼函數和原來的非同步函數徹底的分離了,從程式碼組織上看,優雅了很多。 resolve 接受一個參數,該參數可以輕鬆實現將資料傳送給使用 then 方法新增的回呼中。
對於 ajax 請求,easy.js 直接將 ajax 方法封裝成了 promise 對象,可以直接添加 then 方法來回調。




複製程式碼
程式碼如下:



E.ajax({

then 方法接受2個函數作為參數,第一個函數是已完成的回調,第二個就是已失敗的回呼。
如果有上面提到的多個 ajax 請求的情況呢?那就要用到 when 這個方法了。此方法可以接受多個 promise 實例作為參數。

複製程式碼 程式碼如下:

var requests = Eaja.when(E.
    url : 'test1.php',
    type : 'GET'
}), E.ajax({
    url : 'test2.php',
 🎜>}));
requests.then(function( arg1, arg2 ){

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

when 方法是將多個promise 實例存到一個數組中,等到該數組的所有promise 實例都是已完成狀態才去執行已完成的回調,一旦有一個實例是已拒絕的狀態,則立即執行已拒絕的回調。

Promise 模式是 CommonJS 的規範之一。很多主流的 JavaScript 函式庫都有對應的實現,如 jQuery 和 Dojo 中,都有 Deferred 去實作這些功能。這裡還是要吐槽下 jQuery 的 Deferred,撇開其內部使用,這應該用戶使用率最低的一個模組了,這和其較複雜的使用方式有一定的關係。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板