ES6躬行記（22）——Promise
在JavaScript中，回調函數是處理非同步編程的常用解決方案，但層層嵌套的回調金字塔（如下代碼所示）一直受人詬病，因為不僅在視覺上更加混亂，而且在管理上也更為複雜。
setTimeout(() => {
var reason = "成功執行";
setTimeout(() => {
console.log(reason);
}, 500);
}, 500);
Promise是ES6新增的特性，能更合理的控制和追蹤非同步操作。它是一個包含狀態、可繼承的對象，不僅能管理而不是依賴回調，還能以同步的方式傳遞非同步的計算結果，從而避免陷入回調金字塔的泥潭中。鏈式（即串聯起來）的Promise讓代碼有更高的可讀性和更便捷的調試性。下面會用Promise實現上一個示例的功能。
var promise = new Promise(function(resolve, reject) {
setTimeout(() => {
resolve("成功執行");
}, 500);
});
promise.then(function(value) {
setTimeout(() => {
console.log(value);
}, 500);
});
示例只是為了能對Promise有個初步的認識，其中涉及的Promise的創建、then()方法等概念，都將在接下來的章節中做詳細的講解。
一、狀態
Promise依據其狀態的變化，讓非同步操作變得有序，而Promise有三種互斥的狀態可供選擇，具體如下所列。
（1）pending：等待中，初始狀態，此時還未處理（Promise中的）非同步操作。
（2）fulfilled：已完成，非同步操作成功時的狀態。
（3）rejected：已拒絕，非同步操作失敗時的狀態。
每個Promise只能維護一個狀態，並且狀態只會朝一個方向變化，即從pending變為fulfilled或rejected，而fulfilled不能變為rejected，反之也一樣，這種處理狀態的行為也叫決議。注意，Promise會在內部處理狀態的變化，並且由於ES6對外沒有暴露訪問Promise狀態的屬性或方法，因此無法在外部判斷Promise當前處在哪個狀態。
二、創建
如果要使用Promise，那麼需要先初始化，可以通過構造函數的方式創建一個Promise實例，如下所示。
var promise = new Promise(function(resolve, reject) {
/* executor */
});
構造函數Promise()能接收一個執行器（executor），即帶有resolve和reject兩個參數的函數，執行器會在構造函數返回新實例前被調用。它的兩個參數也是函數，分別適合不同的語境，具體如下所列。
（1）在執行器中的非同步操作完成時會調用resolve()函數，當前Promise的狀態會根據它的參數發生變化。當參數為空或非Promise時，當前狀態變成fulfilled；當參數是Promise時，當前Promise的狀態和參數的相同。
（2）在執行器中的非同步操作錯誤時會調用reject()函數，當前Promise的狀態會變成rejected。
resolve()和reject()都能接收一個參數（即決議結果），前者的參數可以是本次操作的結果；而後者的參數可以是操作失敗的理由，它們都會傳遞給下一個非同步操作。
三、then()
在生成Promise實例之後，就能通過then()方法綁定狀態變化後的回調函數（即處理方法），如下代碼所示，此處是非同步操作同步化的關鍵。
promise.then(function(value) {
// success
}, function(reason) {
// failure
});
then()方法的兩個參數，可分別指定狀態變成fulfilled和rejected後的回調函數，而這兩個回調函數的參數分別來自於resolve()和reject()函數。通過then()方法的這兩個回調函數就能清晰的反饋出非同步操作是否成功執行了。
由於then()方法的返回值是一個新的Promise實例，因此可以鏈式調用then()方法，按順序綁定回調函數，如下所示。
var chain = new Promise(function(resolve, reject) {
reject("error");
});
chain.then(null, function(reason) {
console.log(reason); //"error"
return "end";
})
.then(function(value) {
console.log(value); //"end"
});
雖然第一個then()方法中的已完成的回調函數是null，但並不會終止數據的傳遞，仍然是先輸出「error」，再輸出「end」。之所以是這樣的輸出順序，與回調函數的執行順序有關。在then()方法鏈中，當前Promise的狀態會決定下一個then()方法執行哪個回調函數，而這個狀態又會受回調函數和它的返回值的影響，具體如下所列。
（1）當返回值是一個非Promise的值時，其狀態會變成fulfilled。
（2）當回調函數拋出一個錯誤時，其狀態會變成rejected。
（3）當返回值是一個Promise時，其狀態與返回值的相同。
下面有一個示例，描述了第三種情況，其中Promise.resolve()創建了已完成的Promise，相當於新創建一個在執行器中調用resolve()函數的Promise；Promise.reject()創建了已拒絕的Promise；catch()方法能處理拒絕的回調函數。這些都將在隨後的章節中做詳細介紹。
var chain = new Promise(function(resolve, reject) {
resolve();
});
chain.then(function(value) {
return Promise.resolve("fulfilled");
//相當於
return new Promise(function(resolve) {
resolve("fulfilled");
});
})
.then(function(value) {
console.log(value); //"fulfilled"
return Promise.reject("rejected");
})
.catch(function(reason) {
console.log(reason); //"rejected"
});
四、thenable
包含then()方法的對象被稱為thenable，所有的Promise都是thenable，下面是一個自定義的thenable，then()方法的參數含義與Promise中的相同。
let tha = {
then(resolve, reject) {
reject("thenable");
}
};
Promise.resolve()能接收一個thenable，並返回一個新的Promise實例，將上一個示例的tha對象傳遞給它，如下所示。
Promise.resolve(tha)
.catch(function(reason) {
console.log(reason); //thenable
}).then(function() {
console.log("end");
});
Promise.resolve()能將thenable轉換成已完成或已拒絕的Promise，其最終的狀態取決於thenable的then()方法，像這個示例中的then()方法調用了reject()函數，因此新的Promise的狀態是已拒絕（rejected）。
五、錯誤處理
Promise的catch()方法可以捕獲並處理前一個非同步操作中拋出的錯誤，它能接收一個已拒絕的回調函數（onRejected），其行為相當於調用一個忽略已完成的回調函數的then()方法，例如像下面這樣第一個參數傳null或undefined。
catch(onRejected)
//相當於
then(null, onRejected)
then(undefined, onRejected)
下面是一個使用了catch()方法的例子，先在執行器中拋出一個錯誤，然後在catch()方法中處理。
var error = new Promise(function(resolve, reject) {
throw "error info";
});
error.catch(function(reason) {
console.log(reason); //"error info"
});
如果Promise的狀態在拋出錯誤之前被改變，那麼這個錯誤就不能被catch()方法捕獲，如下所示。
var error = new Promise(function(resolve, reject) {
resolve();
throw "error info";
});
error.catch(function(reason) {
console.log(reason); //不會輸出
});
在執行器中，由於resolve()函數在throw語句之前被調用，因此「error info」這句錯誤理由就不能在catch()方法中輸出。
在鏈式的Promise中，一旦發生錯誤，那麼這個錯誤在沒被捕獲前，會一直傳遞下去。為了確保所有的錯誤都能被處理，可在鏈的末尾加上catch()方法。
推薦閱讀：