久久久久在线观看_又色又爽又黄的免费视频播放_一区中文字幕_日韩电影在线播放

今日頭條 焦點資訊 營銷之道 企業報道 淘寶運營 網站建設 軟件開發 400電話
  當前位置: 首頁 » 資訊 » 網站建設 » 正文

使用Promise模式來簡化JavaScript的異步回調

放大字體  縮小字體 發布日期:2018-02-18  來源:新格網  作者:新格網  瀏覽次數:585  【去百度看看】
核心提示:網頁的交互越來越復雜,JavaScript 的異步操作也隨之越來越多。如常見的 ajax 請求,需要在請求完成時響應操作,請求通常是異步的,請求的過程中用戶還能進行其他的操作,不會對頁面進行阻塞,這種異步的交互效果對用戶來說是挺有友好的。

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

先看看下面這個常見的異步函數。

var showMsg = function(){

setTimeout(function(){

alert( ‘hello’ );

}, 5000 );

};

如果要給該函數添加回調,通常會這么干。

var showMsg = function( callback ){

setTimeout(function(){

alert( ‘hello’ );

// 此處添加回調

callback();

}, 5000 );

};

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

var showMsg = function(){

// 構造promise實例

var promise = new E.Promise();

setTimeout(function(){

alert( ‘hello’ );

// 改變promise的狀態

promise.resolve( ‘done’ );

}, 5000 );

// 返回promise實例

return promise;

};

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

showMsg().then(function( str ){

// 回調添加到這里來了

callback( str );

});

這樣就將回調函數和原來的異步函數徹底的分離了,從代碼組織上看,優雅了很多。resolve 接受一個參數,該參數就可以輕松實現將數據傳送給使用 then 方法添加的回調中。

對于 ajax 請求,easy.js 直接將 ajax 方法封裝成了 promise 對象,可以直接添加 then 方法來回調。

E.ajax({

url : ‘test1.php’,

type : ‘GET’

})

then(function(){

// 添加請求成功的回調

}, function(){

// 添加請求失敗的回調

});

then 方法接受2個函數作為參數,第一個函數是已完成的回調,第二個就是已失敗的回調。

如果有上面提到的多個 ajax 請求的情況呢?那么就要用到 when 這個方法了。該方法可以接受多個 promise 實例作為參數。

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

Promise 模式是 CommonJS 的規范之一。很多主流的 Javascript 庫都有相應的實現,如 jQuery 和 Dojo 中,都有 Deferred 去實現這些功能。在這里還是要吐槽下 jQuery 的 Deferred,撇開其內部使用,這應該用戶使用率最低的一個模塊了,這和其較復雜的使用方式有一定的關系。

如果你想深入的研究 easy.js 的 promise 源碼,可以查看點擊這兒的鏈接。

文章來源:夜雨帶刀博客

 
 
[ 資訊搜索 ]  [ 加入收藏 ]  [ 告訴好友 ]  [ 打印本文 ]  [ 違規舉報 ]  [ 關閉窗口 ]

 
0條 [查看全部]  相關評論

 
網站首頁 | 關于我們 | 聯系方式 | 使用協議 | 版權隱私 | 網站地圖 | 排名推廣 | 廣告服務 | 積分換禮 | 網站留言 | RSS訂閱 | 吉ICP備11001726號-6
企業800網 · 提供技術支持