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

網頁的互動越來越複雜，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 源碼，可以查看點擊這兒的連結。.

文章來源：夜雨帶刀部落格