JavaScript異步回調(diào)的Promise模式封裝實(shí)例
網(wǎng)頁(yè)的交互越來(lái)越復(fù)雜,JavaScript 的異步操作也隨之越來(lái)越多。如常見(jiàn)的 ajax 請(qǐng)求,需要在請(qǐng)求完成時(shí)響應(yīng)操作,請(qǐng)求通常是異步的,請(qǐng)求的過(guò)程中用戶(hù)還能進(jìn)行其他的操作,不會(huì)對(duì)頁(yè)面進(jìn)行阻塞,這種異步的交互效果對(duì)用戶(hù)來(lái)說(shuō)是挺有友好的。但是對(duì)于開(kāi)發(fā)者來(lái)說(shuō),要大量處理這種操作,就很不友好了。異步請(qǐng)求完成的操作必須預(yù)先定義在回調(diào)函數(shù)中,等到請(qǐng)求完成就必須調(diào)用這個(gè)函數(shù)。這種非線性的異步編程方式會(huì)讓開(kāi)發(fā)者很不適應(yīng),同時(shí)也帶來(lái)了諸多的不便,增加了代碼的耦合度和復(fù)雜性,代碼的組織上也會(huì)很不優(yōu)雅,大大降低了代碼的可維護(hù)性。情況再?gòu)?fù)雜點(diǎn),如果一個(gè)操作要等到多個(gè)異步 ajax 請(qǐng)求的完成才能進(jìn)行,就會(huì)出現(xiàn)回調(diào)函數(shù)嵌套的情況,如果需要嵌套好幾層,那你就只能自求多福了。
先看看下面這個(gè)常見(jiàn)的異步函數(shù)。
var showMsg = function(){
setTimeout(function(){
alert( 'hello' );
}, 5000 );
};
如果要給該函數(shù)添加回調(diào),通常會(huì)這么干。
var showMsg = function( callback ){
setTimeout(function(){
alert( 'hello' );
// 此處添加回調(diào)
callback();
}, 5000 );
};
如果是使用 easy.js 的 Promise,添加回調(diào)的方法就會(huì)優(yōu)雅多了,前提是需要將原函數(shù)封裝成一個(gè) promise 實(shí)例。
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(已拒絕,失敗)。下面再來(lái)看看如何添加回調(diào)。
showMsg().then(function( str ){
// 回調(diào)添加到這里來(lái)了
callback( str );
});
這樣就將回調(diào)函數(shù)和原來(lái)的異步函數(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 方法來(lái)回調(diào)。
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ù)。
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,撇開(kāi)其內(nèi)部使用,這應(yīng)該用戶(hù)使用率最低的一個(gè)模塊了,這和其較復(fù)雜的使用方式有一定的關(guān)系。
- Javascript異步編程之你真的懂Promise嗎
- JavaScript異步編程之Promise的初步使用詳解
- 深入理解JS異步編程-Promise
- 異步JavaScript編程中的Promise使用方法
- NodeJS中利用Promise來(lái)封裝異步函數(shù)
- javascript異步編程代碼書(shū)寫(xiě)規(guī)范Promise學(xué)習(xí)筆記
- Javascript中的異步編程規(guī)范Promises/A詳細(xì)介紹
- Javascript異步編程模型Promise模式詳細(xì)介紹
- JavaScript異步編程Promise模式的6個(gè)特性
- JS 9個(gè)Promise面試題
相關(guān)文章
詳解微信小程序工程化探索之webpack實(shí)戰(zhàn)
這篇文章主要介紹了詳解微信小程序工程化探索之webpack實(shí)戰(zhàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04微信小程序?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í)通訊的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05詳解JavaScript的Date對(duì)象(制作簡(jiǎn)易鐘表)
這篇文章主要為大家詳細(xì)介紹了JavaScript的Date對(duì)象,和大家分享如何制作簡(jiǎn)易鐘表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子
javascript中日期轉(zhuǎn)換成時(shí)間戳的小例子,需要的朋友可以參考一下2013-03-03js?通過(guò)Object.defineProperty()?定義和控制對(duì)象屬性
這篇文章主要介紹了js?通過(guò)Object.defineProperty()?定義和控制對(duì)象屬性,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-08-08