在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()方法。 ***** > 原文出處： [博客園-ES6躬行記](https://www.cnblogs.com/strick/category/1372951.html) [知乎專欄-ES6躬行記](https://zhuanlan.zhihu.com/pwes6) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。