免費AI編程助手
JavaScript Promise對象
Promise是JavaScript異步操作解決方案。介紹Promise之前，先對異步操作做一個詳細介紹。
JavaScript的異步執(zhí)行
概述
Javascript語言的執(zhí)行環(huán)境是"單線程"（single thread）。所謂"單線程"，就是指一次只能完成一件任務。如果有多個任務，就必須排隊，前面一個任務完成，再執(zhí)行后面一個任務。
這種模式的好處是實現起來比較簡單，執(zhí)行環(huán)境相對單純；壞處是只要有一個任務耗時很長，后面的任務都必須排隊等著，會拖延整個程序的執(zhí)行。常見的瀏覽器無響應（假死），往往就是因為某一段Javascript代碼長時間運行（比如死循環(huán)），導致整個頁面卡在這個地方，其他任務無法執(zhí)行。
JavaScript語言本身并不慢，慢的是讀寫外部數據，比如等待Ajax請求返回結果。這個時候，如果對方服務器遲遲沒有響應，或者網絡不通暢，就會導致腳本的長時間停滯。
為了解決這個問題，Javascript語言將任務的執(zhí)行模式分成兩種：同步（Synchronous）和異步（Asynchronous）。"同步模式"就是傳統做法，后一個任務等待前一個任務結束，然后再執(zhí)行，程序的執(zhí)行順序與任務的排列順序是一致的、同步的。這往往用于一些簡單的、快速的、不涉及讀寫的操作。
"異步模式"則完全不同，每一個任務分成兩段，第一段代碼包含對外部數據的請求，第二段代碼被寫成一個回調函數，包含了對外部數據的處理。第一段代碼執(zhí)行完，不是立刻執(zhí)行第二段代碼，而是將程序的執(zhí)行權交給第二個任務。等到外部數據返回了，再由系統通知執(zhí)行第二段代碼。所以，程序的執(zhí)行順序與任務的排列順序是不一致的、異步的。
以下總結了"異步模式"編程的幾種方法，理解它們可以讓你寫出結構更合理、性能更出色、維護更方便的JavaScript程序。
回調函數
回調函數是異步編程最基本的方法。
假定有兩個函數f1和f2，后者等待前者的執(zhí)行結果。
f1();
f2();如果f1是一個很耗時的任務，可以考慮改寫f1，把f2寫成f1的回調函數。
function f1(callback){
setTimeout(function () {
// f1的任務代碼
callback();
}, 1000);
}執(zhí)行代碼就變成下面這樣：
f1(f2);采用這種方式，我們把同步操作變成了異步操作，f1不會堵塞程序運行，相當于先執(zhí)行程序的主要邏輯，將耗時的操作推遲執(zhí)行。
回調函數的優(yōu)點是簡單、容易理解和部署，缺點是不利于代碼的閱讀和維護，各個部分之間高度耦合（Coupling），使得程序結構混亂、流程難以追蹤（尤其是回調函數嵌套的情況），而且每個任務只能指定一個回調函數。
事件監(jiān)聽
另一種思路是采用事件驅動模式。任務的執(zhí)行不取決于代碼的順序，而取決于某個事件是否發(fā)生。
還是以f1和f2為例。首先，為f1綁定一個事件（這里采用的jQuery的寫法）。
f1.on('done', f2);上面這行代碼的意思是，當f1發(fā)生done事件，就執(zhí)行f2。然后，對f1進行改寫：
function f1(){
setTimeout(function () {
// f1的任務代碼
f1.trigger('done');
}, 1000);
}f1.trigger('done')表示，執(zhí)行完成后，立即觸發(fā)done事件，從而開始執(zhí)行f2。
這種方法的優(yōu)點是比較容易理解，可以綁定多個事件，每個事件可以指定多個回調函數，而且可以"去耦合"（Decoupling），有利于實現模塊化。缺點是整個程序都要變成事件驅動型，運行流程會變得很不清晰。
發(fā)布/訂閱
"事件"完全可以理解成"信號"，如果存在一個"信號中心"，某個任務執(zhí)行完成，就向信號中心"發(fā)布"（publish）一個信號，其他任務可以向信號中心"訂閱"（subscribe）這個信號，從而知道什么時候自己可以開始執(zhí)行。這就叫做"發(fā)布/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）。
這個模式有多種實現，下面采用的是Ben Alman的Tiny Pub/Sub，這是jQuery的一個插件。
首先，f2向"信號中心"jQuery訂閱"done"信號。
jQuery.subscribe("done", f2);然后，f1進行如下改寫：
function f1(){
setTimeout(function () {
// f1的任務代碼
jQuery.publish("done");
}, 1000);
}jQuery.publish("done")的意思是，f1執(zhí)行完成后，向"信號中心"jQuery發(fā)布"done"信號，從而引發(fā)f2的執(zhí)行。
f2完成執(zhí)行后，也可以取消訂閱（unsubscribe）。
jQuery.unsubscribe("done", f2);這種方法的性質與"事件監(jiān)聽"類似，但是明顯優(yōu)于后者。因為我們可以通過查看"消息中心"，了解存在多少信號、每個信號有多少訂閱者，從而監(jiān)控程序的運行。
異步操作的流程控制
如果有多個異步操作，就存在一個流程控制的問題：確定操作執(zhí)行的順序，以后如何保證遵守這種順序。
function async(arg, callback) {
console.log('參數為 ' + arg +' , 1秒后返回結果');
setTimeout(function() { callback(arg * 2); }, 1000);
}上面代碼的async函數是一個異步任務，非常耗時，每次執(zhí)行需要1秒才能完成，然后再調用回調函數。
如果有6個這樣的異步任務，需要全部完成后，才能執(zhí)行下一步的final函數。
function final(value) {
console.log('完成: ', value);
}請問應該如何安排操作流程？
async(1, function(value){
async(value, function(value){
async(value, function(value){
async(value, function(value){
async(value, function(value){
async(value, final);
});
});
});
});
});上面代碼采用6個回調函數的嵌套，不僅寫起來麻煩，容易出錯，而且難以維護。
串行執(zhí)行
我們可以編寫一個流程控制函數，讓它來控制異步任務，一個任務完成以后，再執(zhí)行另一個。這就叫串行執(zhí)行。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
function series(item) {
if(item) {
async( item, function(result) {
results.push(result);
return series(items.shift());
});
} else {
return final(results);
}
}
series(items.shift());上面代碼中，函數series就是串行函數，它會依次執(zhí)行異步任務，所有任務都完成后，才會執(zhí)行final函數。items數組保存每一個異步任務的參數，results數組保存每一個異步任務的運行結果。
并行執(zhí)行
流程控制函數也可以是并行執(zhí)行，即所有異步任務同時執(zhí)行，等到全部完成以后，才執(zhí)行final函數。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
items.forEach(function(item) {
async(item, function(result){
results.push(result);
if(results.length == items.length) {
final(results);
}
})
});上面代碼中，forEach方法會同時發(fā)起6個異步任務，等到它們全部完成以后，才會執(zhí)行final函數。
并行執(zhí)行的好處是效率較高，比起串行執(zhí)行一次只能執(zhí)行一個任務，較為節(jié)約時間。但是問題在于如果并行的任務較多，很容易耗盡系統資源，拖慢運行速度。因此有了第三種流程控制方式。
并行與串行的結合
所謂并行與串行的結合，就是設置一個門檻，每次最多只能并行執(zhí)行n個異步任務。這樣就避免了過分占用系統資源。
var items = [ 1, 2, 3, 4, 5, 6 ];
var results = [];
var running = 0;
var limit = 2;
function launcher() {
while(running < limit && items.length > 0) {
var item = items.shift();
async(item, function(result) {
results.push(result);
running--;
if(items.length > 0) {
launcher();
} else if(running == 0) {
final();
}
});
running++;
}
}
launcher();上面代碼中，最多只能同時運行兩個異步任務。變量running記錄當前正在運行的任務數，只要低于門檻值，就再啟動一個新的任務，如果等于0，就表示所有任務都執(zhí)行完了，這時就執(zhí)行final函數。
Promise對象
簡介
Promises對象是CommonJS工作組提出的一種規(guī)范，目的是為異步操作提供統一接口。
那么，什么是Promises？首先，它是一個對象，也就是說與其他JavaScript對象的用法，沒有什么兩樣；其次，它起到代理作用（proxy），使得異步操作具備同步操作（synchronous code）的接口，即充當異步操作與回調函數之間的中介，使得程序具備正常的同步運行的流程，回調函數不必再一層層包裹起來。
簡單說，它的思想是，每一個異步任務立刻返回一個Promise對象，由于是立刻返回，所以可以采用同步操作的流程。這個Promises對象有一個then方法，允許指定回調函數，在異步任務完成后調用。比如，f1的回調函數f2,可以寫成：
(new Promise(f1)).then(f2);這種寫法對于嵌套的回調函數尤其有用。
// 傳統寫法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});
// Promises的寫法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);從上面代碼可以看到，采用Promises接口以后，程序流程變得非常清楚，十分易讀。
總的來說，傳統的回調函數寫法使得代碼混成一團，變得橫向發(fā)展而不是向下發(fā)展。Promises規(guī)范就是為了解決這個問題而提出的，目標是使用正常的程序流程（同步），來處理異步操作。它先返回一個Promise對象，后面的操作以同步的方式，寄存在這個對象上面。等到異步操作有了結果，再執(zhí)行前期寄放在它上面的其他操作。
Promises原本只是社區(qū)提出的一個構想，一些外部函數庫率先實現了這個功能。ECMAScript 6將其寫入語言標準，Chrome和Firefox瀏覽器都已經部署了這個功能。
Promise接口
當異步任務返回一個promise對象（小寫表示這是Promise的實例）時，該對象只有三種狀態(tài)：未完成（pending）、已完成（fulfilled）、失?。╮ejected）。
這三種的狀態(tài)的變化途徑只有兩個，且只能發(fā)生一次：從“未完成”到“已完成”，或者從“未完成”到“失敗”。一旦當前狀態(tài)變?yōu)椤耙淹瓿伞被颉笆 ?，就意味著不會再發(fā)生狀態(tài)變化了。
Promise對象的運行結果，最終只有兩種。
- 得到一個值，狀態(tài)變?yōu)閒ulfilled
- 拋出一個錯誤，狀態(tài)變?yōu)閞ejected
promise對象的then方法用來添加回調函數。它可以接受兩個回調函數，第一個是操作成功（fulfilled）時的回調函數，第二個是操作失敗（rejected）時的回調函數（可以不提供）。一旦狀態(tài)改變，就調用相應的回調函數。
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4)
.then(console.log, console.error);再來看上面的代碼就很清楚，step1是一個耗時很長的異步任務，然后使用then方法，依次綁定了三個step1操作成功后的回調函數step2、step3、step4，最后再用then方法綁定兩個回調函數：操作成功時的回調函數console.log，操作失敗時的回調函數console.error。
console.log和console.error這兩個最后的回調函數，用法上有一點重要的區(qū)別。console.log只顯示回調函數step4的返回值，而console.error可以顯示step2、step3、step4之中任何一個發(fā)生的錯誤。也就是說，假定step2操作失敗，拋出一個錯誤，這時step3和step4都不會再運行了，promises對象開始尋找接下來的第一個錯誤回調函數，在上面代碼中是console.error。所以，結論就是Promises對象的錯誤有傳遞性。
換言之，上面的代碼等同于下面的形式。
try {
var v1 = step1();
var v2 = step2(v1);
var v3 = step3(v2);
var v4 = step4(v3);
console.log(v4);
} catch (error) {
console.error(error);
}上面代碼表示，try部分任何一步的錯誤，都會被catch部分捕獲，并導致整個Promise操作的停止。
用法辨析
Promise的用法，簡單說就是一句話：使用then方法添加回調函數。但是，不同的寫法有一些細微的差別，請看下面四種寫法，它們的差別在哪里？
// 寫法一
doSomething().then(function () {
return doSomethingElse();
});
// 寫法二
doSomething().then(function () {
doSomethingElse();
});
// 寫法三
doSomething().then(doSomethingElse());
// 寫法四
doSomething().then(doSomethingElse);為了便于解釋，上面四種寫法都再用then方法接一個回調函數。
寫法一的finalHandler回調函數的參數，是doSomethingElse函數的運行結果。
doSomething().then(function () {
return doSomethingElse();
}).then(finalHandler);寫法二的finalHandler回調函數的參數，是undefined。
doSomething().then(function () {
doSomethingElse();
}).then(finalHandler);寫法三的finalHandler回調函數的參數，是doSomethingElse函數返回的回調函數的運行結果。
doSomething().then(doSomethingElse())
.then(finalHandler);寫法四與寫法一只有一個差別，那就是doSomethingElse會接收到doSomething()返回的結果。
doSomething().then(doSomethingElse)
.then(finalHandler);Promises對象的實現
為了真正理解Promise對象，下面我們自己動手寫一個Promise的實現。
首先，將Promise定義成構造函數。
var Promise = function () {
this.state = 'pending';
this.thenables = [];
};上面代碼表示，Promise的實例對象的state屬性默認為“未完成”狀態(tài)（pending），還有一個thenables屬性指向一個數組，用來存放then方法生成的內部對象。
接下來，部署實例對象的resolve方法，該方法用來將實例對象的狀態(tài)從“未完成”變?yōu)椤耙淹瓿伞薄?/p>
Promise.prototype.resolve = function (value) {
if (this.state != 'pending') return;
this.state = 'fulfilled';
this.value = value;
this._handleThen();
return this;
}上面代碼除了改變實例的狀態(tài)，還將異步任務的返回值存入實例對象的value屬性，然后調用內部方法_handleThen，最后返回實例對象本身。
類似地，部署實例對象的reject方法。
Promise.prototype.reject = function (reason) {
if (this.state != 'pending') return;
this.state = 'rejected';
this.reason = reason;
this._handleThen();
return this;
};然后，部署實例對象的then方法。它接受兩個參數，分別是異步任務成功時的回調函數（onFulfilled）和出錯時的回調函數（onRejected）。為了可以部署鏈式操作，它必須返回一個新的Promise對象。
Promise.prototype.then = function (onFulfilled, onRejected) {
var thenable = {};
if (typeof onFulfilled == 'function') {
thenable.fulfill = onFulfilled;
};
if (typeof onRejected == 'function') {
thenable.reject = onRejected;
};
if (this.state != 'pending') {
setImmediate(function () {
this._handleThen();
}.bind(this));
}
thenable.promise = new Promise();
this.thenables.push(thenable);
return thenable.promise;
}上面代碼首先定義了一個內部變量thenable對象，將then方法的兩個參數都加入這個對象的屬性。然后，檢查當前狀態(tài)，如果不等于“未完成”，則在當前操作結束后，立即調用_handleThen方法。接著，在thenable對象的promise屬性上生成一個新的Promise對象，并在稍后返回這個對象。最后，將thenable對象加入實例對象的thenables數組。
下一步就要部署內部方法_handleThen，它用來處理通過then方法綁定的回調函數。
Promise.prototype._handleThen = function () {
if (this.state === 'pending') return;
if (this.thenables.length) {
for (var i = 0; i < this.thenables.length; i++) {
var thenPromise = this.thenables[i].promise;
var returnedVal;
try {
// 運行回調函數
} catch (e) {
thenPromise.reject(e);
}
}
this.thenables = [];
}
}上面代碼的邏輯是這樣的：如果實例對象的狀態(tài)是“未完成”，就返回，否則檢查thenables屬性是否有值。如果有值，表明里面儲存了需要執(zhí)行的回調函數，則依次運行回調函數。運行完成后，清空thenables屬性。
之所以把回調函數的執(zhí)行放在try...catch結構中，是因為一旦出錯，就會自動執(zhí)行catch代碼塊，從而可以運行下一個Promise實例對象的reject方法，這使得調用reject方法變得很簡單。下面是try代碼塊中的代碼。
try {
switch (this.state) {
case 'fulfilled':
if (this.thenables[i].fulfill) {
returnedVal = this.thenables[i].fulfill(this.value);
} else {
thenPromise.resolve(this.value);
}
break;
case 'rejected':
if (this.thenables[i].reject) {
returnedVal = this.thenables[i].reject(this.reason);
} else {
thenPromise.reject(this.reason);
}
break;
}
if (returnedVal === null) {
this.thenables[i].promise.resolve(returnedVal);
} else if (returnedVal instanceof Promise || typeof returnedVal.then === 'function') {
returnedVal.then(thenPromise.resolve.bind(thenPromise), thenPromise.reject.bind(thenPromise));
} else {
this.thenables[i].promise.resolve(returnedVal);
}
}上面代碼首先根據實例對象的狀態(tài)，分別調用fulfill或reject回調函數，并傳入相應的參數，并將返回值存入returnVal變量。然后再去改變this.thenables[i].promise對象的狀態(tài)，觸發(fā)下一個Promise對象的resolve或者reject方法。
針對returnedVal的判斷，目的是如果returnedVal是一個Promise對象，那么后面的回調函數都要改為綁定在它上面。
最后，由于我們寫的是供調用的函數庫，需要將構造函數輸出。
module.exports = Promise;實例：Ajax操作
Ajax操作是典型的異步操作，傳統上往往寫成下面這樣。
function search(term, onload, onerror) {
var xhr, results, url;
url = 'http://example.com/search?q=' + term;
xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
if (this.status === 200) {
results = JSON.parse(this.responseText);
onload(results);
}
};
xhr.onerror = function (e) {
onerror(e);
};
xhr.send();
}
search("Hello World", f1, f2);上面代碼的回調函數，必須直接傳入。如果使用Promises方法，就可以寫成下面這樣。
function search(term) {
var url = 'http://example.com/search?q=' + term;
var p = new Promise();
var xhr = new XMLHttpRequest();
var result;
xhr.open('GET', url, true);
xhr.onload = function (e) {
if (this.status === 200) {
results = JSON.parse(this.responseText);
p.resolve(results);
}
};
xhr.onerror = function (e) {
p.reject(e);
};
xhr.send();
return p;
}
search("Hello World").then(f1, f2);用了Promises以后，回調函數就可以用then方法加載。
小結
Promises的優(yōu)點在于，讓回調函數變成了規(guī)范的鏈式寫法，程序流程可以看得很清楚。它的一整套接口，可以實現許多強大的功能，比如為多個異步操作部署一個回調函數、為多個回調函數中拋出的錯誤統一指定處理方法等等。
而且，它還有一個前面三種方法都沒有的好處：如果一個任務已經完成，再添加回調函數，該回調函數會立即執(zhí)行。所以，你不用擔心是否錯過了某個事件或信號。這種方法的缺點就是，編寫和理解都相對比較難。
實際可以使用的Promises實現，參見jQuery的deferred對象一節(jié)。
參考鏈接
- Sebastian Porto, Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises
- Rhys Brett-Bowen, Promises/A+ - understanding the spec through implementation
- Matt Podwysocki, Amanda Silver, Asynchronous Programming in JavaScript with “Promises”
- Marc Harter, Promise A+ Implementation
- Bryan Klimt, What’s so great about JavaScript Promises?
- Jake Archibald, JavaScript Promises There and back again
- Mikito Takada, 7. Control flow, Mixu's Node book
更多建議：