1.1 概述

Promise 對象用于表示一個(gè)異步操作的最終完成（或失敗）及其結(jié)果值。是異步編程的一種解決方案（可以解決回調(diào)地獄問題）。

一個(gè) Promise 對象代表一個(gè)在這個(gè) promise 被創(chuàng)建出來時(shí)不一定已知值的代理。它讓你能夠把異步操作最終的成功返回值或者失敗原因和相應(yīng)的處理程序關(guān)聯(lián)起來。這樣使得異步方法可以像同步方法那樣返回值：異步方法并不會(huì)立即返回最終的值，而是會(huì)返回一個(gè) promise，以便在未來某個(gè)時(shí)候把值交給使用者。

原生JavaScipt案例合集
JavaScript +DOM基礎(chǔ)
JavaScript 基礎(chǔ)到高級
Canvas游戲開發(fā)

一個(gè) Promise 必然處于以下幾種狀態(tài)之一：

• 待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕。
• 已兌現(xiàn)（fulfilled）：意味著操作成功完成。
• 已拒絕（rejected）：意味著操作失敗。

Promise 對象只有：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected 的狀態(tài)改變。只要處于 fulfilled 和 rejected ，狀態(tài)就不會(huì)再變了即 resolved（已定型）。

Promise 對象一旦新建它就會(huì)立即執(zhí)行，中途無法取消。

我們可以用 Promise.prototype.then()、Promise.prototype.catch() 和 Promise.prototype.finally() 這些方法將進(jìn)一步的操作與一個(gè)變?yōu)橐亚枚顟B(tài)的 promise 關(guān)聯(lián)起來。

例如 .then() 方法需要兩個(gè)參數(shù)，第一個(gè)參數(shù)作為處理已兌現(xiàn)狀態(tài)的回調(diào)函數(shù)，而第二個(gè)參數(shù)則作為處理已拒絕狀態(tài)的回調(diào)函數(shù)。每一個(gè) .then() 方法還會(huì)返回一個(gè)新生成的 promise 對象，這個(gè)對象可被用作鏈?zhǔn)秸{(diào)用，就像這樣：

const myPromise = new Promise((resolve, reject) => {setTimeout(() => {resolve('foo');}, 300);
});myPromise.then(value => { return value + ' and bar'; }).then(value => { return value + ' and bar again'; }).then(value => { return value + ' and again'; }).then(value => { return value + ' and again'; }).then(value => { console.log(value) }).catch(err => { console.log(err) });

在沒有迫切需要的情況下，可以在最后一個(gè) .catch() 語句時(shí)再進(jìn)行錯(cuò)誤處理，這種做法更加簡單。過早地處理變?yōu)橐丫芙^狀態(tài)的 promise 會(huì)對之后 promise 的鏈?zhǔn)秸{(diào)用造成影響，除非我們需要馬上處理這個(gè)錯(cuò)誤，例如，外面必須拋出某種類型的錯(cuò)誤以在鏈?zhǔn)秸{(diào)用中傳遞錯(cuò)誤狀態(tài)。。

1.2 靜態(tài)方法

Promise.all() 和 Promise.race() 是并行運(yùn)行異步操作的兩個(gè)組合式工具。

• Promise.all(iterable) 這個(gè)方法返回一個(gè)新的 promise 對象，等到所有的 promise 對象都成功或有任意一個(gè) promise 失敗。如果所有的 promise 都成功了，它會(huì)把一個(gè)包含 iterable 里所有 promise 返回值的數(shù)組作為成功回調(diào)的返回值。順序跟 iterable 的順序保持一致。一旦有任意一個(gè) iterable 里面的 promise 對象失敗則立即以該 promise 對象失敗的理由來拒絕這個(gè)新的 promise。
• Promise.race(iterable) 等到任意一個(gè) promise 的狀態(tài)變?yōu)橐亚枚?。?dāng) iterable 參數(shù)里的任意一個(gè)子 promise 成功或失敗后，父 promise 馬上也會(huì)用子 promise 的成功返回值或失敗詳情作為參數(shù)調(diào)用父 promise 綁定的相應(yīng)處理函數(shù)，并返回該 promise 對象。

const p1 = getCmpData("basicSetting");
var p2 = null;
if (that.isOnlineForm) {p2 = getCmpData("formDesign");
} else {p2 = new Promise(function (resolve, reject) {resolve(null);});
}
const p3 = getCmpData("processDesign");Promise.all([p1, p2, p3])
.then((res) => {const param = {};this.sendToServer(param); //接口調(diào)用傳參
})
.catch((err) => {//錯(cuò)誤信息處理err.target && (this.activeStep = err.target);err.msg && this.$message.warning(err.msg);
});

• Promise.allSettled(iterable) 等到所有 promise 都已敲定（每個(gè) promise 都已兌現(xiàn)或已拒絕）。返回一個(gè) promise，該 promise 在所有 promise 都敲定后完成，并兌現(xiàn)一個(gè)對象數(shù)組，其中的對象對應(yīng)每個(gè) promise 的結(jié)果。
• Promise.any(iterable) 接收一個(gè) promise 對象的集合，當(dāng)其中的任意一個(gè) promise 成功，就返回那個(gè)成功的 promise 的值。

Promise.resolve() 和 Promise.reject() 是手動(dòng)創(chuàng)建一個(gè)已經(jīng) resolve 或者 reject 的 Promise 快捷方法。它們有時(shí)很有用。

• Promise.reject(reason) 返回一個(gè)狀態(tài)為已拒絕的 Promise 對象，并將給定的失敗信息傳遞給對應(yīng)的處理函數(shù)。
• Promise.resolve(value) 返回一個(gè)狀態(tài)由給定 value 決定的 Promise 對象。如果該值是 thenable（即，帶有 then 方法的對象），返回的 Promise 對象的最終狀態(tài)由 then 方法執(zhí)行結(jié)果決定；否則，返回的 Promise 對象狀態(tài)為已兌現(xiàn)，并且將該 value 傳遞給對應(yīng)的 then 方法。

[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
.then(result3 => { /* use result3 */ });

通常而言，如果你不知道一個(gè)值是否是 promise 對象，使用 Promise.resolve(value) 來返回一個(gè) Promise 對象，這樣就能將該 value 以 promise 對象形式使用。

1.3 實(shí)例方法

• Promise.prototype.then() 為 promise 添加被兌現(xiàn)和被拒絕狀態(tài)的回調(diào)函數(shù)，其以回調(diào)函數(shù)的返回值兌現(xiàn) promise。若不處理已兌現(xiàn)或者已拒絕狀態(tài)（例如，onFulfilled 或 onRejected 不是一個(gè)函數(shù)），則返回 promise 被敲定時(shí)的值。
• Promise.prototype.catch() 為 promise 添加一個(gè)被拒絕狀態(tài)的回調(diào)函數(shù)，并返回一個(gè)新的 promise，若回調(diào)函數(shù)被調(diào)用，則兌現(xiàn)其返回值，否則兌現(xiàn)原來的 promise 兌現(xiàn)的值。
• Promise.prototype.finally() 為 promise 添加一個(gè)回調(diào)函數(shù)，并返回一個(gè)新的 promise。這個(gè)新的 promise 將在原 promise 被兌現(xiàn)時(shí)兌現(xiàn)。而傳入的回調(diào)函數(shù)將在原 promise 被敲定（無論被兌現(xiàn)還是被拒絕）時(shí)被調(diào)用。

1.4 Promise 拒絕事件

當(dāng) Promise 被拒絕時(shí)，會(huì)有下文所述的兩個(gè)事件之一被派發(fā)到全局作用域（通常而言，就是window；如果是在 web worker 中使用的話，就是 Worker 或者其他 worker-based 接口）。這兩個(gè)事件如下所示：

• rejectionhandled 當(dāng) Promise 被拒絕、并且在 reject 函數(shù)處理該 rejection 之后會(huì)派發(fā)此事件。
• unhandledrejection 當(dāng) Promise 被拒絕，但沒有提供 reject 函數(shù)來處理該 rejection 時(shí)，會(huì)派發(fā)此事件。

以上兩種情況中，PromiseRejectionEvent 事件都有兩個(gè)屬性，一個(gè)是 promise 屬性，該屬性指向被駁回的 Promise，另一個(gè)是 reason (en-US) 屬性，該屬性用來說明 Promise 被駁回的原因。

window.addEventListener("unhandledrejection", event => {/* 你可以在這里添加一些代碼，以便檢查event.promise 中的 promise 和event.reason 中的 rejection 原因 */event.preventDefault();
}, false);