百度權(quán)重查詢 站長(zhǎng)交易 友情鏈接交換 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 seo監(jiān)控

網(wǎng)頁(yè)的交互越來(lái)越復(fù)雜，javascript 的異步操作也隨之越來(lái)越多。如常見(jiàn)的 ajax 請(qǐng)求，需要在請(qǐng)求完成時(shí)響應(yīng)操作，請(qǐng)求通常是異步的，請(qǐng)求的過(guò)程中用戶還能進(jìn)行其他的操作，不會(huì)對(duì)頁(yè)面進(jìn)行壅塞，這種異步的交互效果對(duì)用戶來(lái)說(shuō)是挺有友愛(ài)的。但是對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，要大量處理這種操作，就很不友愛(ài)了。異步請(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的狀況

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 的狀況為已完成，第三步就是返回這個(gè) promise 實(shí)例。每個(gè) promise 實(shí)例都有3種狀況，分別為 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 方法往返調(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í)例都是已完成狀況才去執(zhí)行已完成的回調(diào)，一旦有一個(gè)實(shí)例是已拒絕的狀況，則立即執(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)該用戶使用率好低的一個(gè)模塊了，這和其較復(fù)雜的使用體例有一定的關(guān)系。

假如你想深入的研究 easy.js 的 promise 源碼，可以查看點(diǎn)擊這兒的鏈接。

文章來(lái)源：夜雨帶刀博客