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

先看看下面這個常見的異步函數(shù)。

var showMsg = function（）{

setTimeout（function（）{

alert（ ‘hello’ ）;

}， 5000 ）;

};

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

var showMsg = function（ callback ）{

setTimeout（function（）{

alert（ ‘hello’ ）;

// 此處添加回調(diào)

callback（）;

}， 5000 ）;

};

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

var showMsg = function（）{

// 構(gòu)造promise實例

var promise = new E.Promise（）;

setTimeout（function（）{

alert（ ‘hello’ ）;

// 改變promise的狀態(tài)

promise.resolve（ ‘done’ ）;

}， 5000 ）;

// 返回promise實例

return promise;

};

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

showMsg（）.then（function（ str ）{

// 回調(diào)添加到這里來了

callback（ str ）;

}）;

這樣就將回調(diào)函數(shù)和原來的異步函數(shù)徹底的分離了，從代碼組織上看，優(yōu)雅了很多。resolve 接受一個參數(shù)，該參數(shù)就可以輕松實現(xiàn)將數(shù)據(jù)傳送給使用 then 方法添加的回調(diào)中。

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

E.ajax（{

url ： ‘test1.php’，

type ： ‘GET’

}）

then（function（）{

// 添加請求成功的回調(diào)

}， function（）{

// 添加請求失敗的回調(diào)

}）;

then 方法接受2個函數(shù)作為參數(shù)，第一個函數(shù)是已完成的回調(diào)，第二個就是已失敗的回調(diào)。

如果有上面提到的多個 ajax 請求的情況呢？那么就要用到 when 這個方法了。該方法可以接受多個 promise 實例作為參數(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 方法是將多個 promise 實例存到一個數(shù)組中，等到該數(shù)組的所有 promise 實例都是已完成狀態(tài)才去執(zhí)行已完成的回調(diào)，一旦有一個實例是已拒絕的狀態(tài)，則立即執(zhí)行已拒絕的回調(diào)。

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

分享標題：如何使用Promise模式來簡化JavaScript的異步回調(diào)
當(dāng)前地址：http://m.newbst.com/news42/312242.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、云服務(wù)器、網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、域名注冊、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)