ES6之Promise 物件
- 含義
Promise是非同步程式設計的一種解決方案，比回撥函式和事件這兩個傳統的解決方案更合理更強大。
是一個容器，存放著某個未來才會結束的事件（通常是一個非同步操作）結果。從語義上說，Promise是一個物件，可以獲取非同步操作的資訊。提供統一的API，各種非同步操作都可以同樣的方法進行處理。
Promise物件有兩個特點：
（1）物件的狀態不受外界的影響。Promise物件代表一個非同步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗）。只有非同步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。
（2）一旦狀態改變，就不會在變，任何時候都可以得到這個結果。Promise物件的狀態改變，只有兩種可能：從pending變為fulfilled和從pending變為rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱為 resolved（已定型）。如果改變已經發生了，你再對Promise物件添加回調函式，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。
以後常說的resolved統一隻指fulfilled狀態，不包含rejected狀態。
有了Promise物件，就可以將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式。此外，Promise物件提供統一的介面，使得控制非同步操作更加容易。
缺點：
a，無法取消Promise，一旦新建它就會立即執行，無法中途取消。
b，如果不設定回撥函式，Promise內部丟擲的錯誤，不會反應到外部。
c，當處於pending狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。
- 基本用法
ES6 規定，Promise物件是一個建構函式，用來生成Promise例項。
const promise = new Promise(function(resolve, reject) { // ... some code if (/* 非同步操作成功 */){ resolve(value); } else { reject(error); } });
Promise建構函式接受一個函式作為引數，該函式的兩個引數分別是resolve和reject。它們是兩個函式，由 JavaScript 引擎提供，不用自己部署。
resolve函式的作用是，將Promise物件的狀態從“未完成”變為“成功”（即從 pending 變為 resolved），在非同步操作成功時呼叫，並將非同步操作的結果，作為引數傳遞出去；reject函式的作用是，將Promise物件的狀態從“未完成”變為“失敗”（即從 pending 變為 rejected），在非同步操作失敗時呼叫，並將非同步操作報出的錯誤，作為引數傳遞出去。
Promise例項生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回撥函式。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then方法可以接受兩個回撥函式作為引數。第一個回撥函式是Promise物件的狀態變為resolved時呼叫，第二個回撥函式是Promise物件的狀態變為rejected時呼叫。其中，第二個函式是可選的，不一定要提供。這兩個函式都接受Promise物件傳出的值作為引數。
如果呼叫resolve函式和reject函式時帶有引數，那麼它們的引數會被傳遞給回撥函式。reject函式的引數通常是Error物件的例項，表示丟擲的錯誤；resolve函式的引數除了正常的值以外，還可能是另一個 Promise 例項，比如像下面這樣。
const p1 = new Promise(function (resolve, reject) {
// ...
});
const p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
//p1和p2都是 Promise 的例項，但是p2的resolve方法將p1作為引數，即一個非同步操作的結果是返回另一個非同步操作。
注意，這時p1的狀態就會傳遞給p2，也就是說，p1的狀態決定了p2的狀態。如果p1的狀態是pending，那麼p2的回撥函式就會等待p1的狀態改變；如果p1的狀態已經是resolved或者rejected，那麼p2的回撥函式將會立刻執行。
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail
p1是一個 Promise，3 秒之後變為rejected。p2的狀態在 1 秒之後改變，resolve方法返回的是p1。由於p2返回的是另一個 Promise，導致p2自己的狀態無效了，由p1的狀態決定p2的狀態。所以，後面的then語句都變成針對後者（p1）。又過了 2 秒，p1變為rejected，導致觸發catch方法指定的回撥函式。
注意，呼叫resolve或reject並不會終結 Promise 的引數函式的執行。
一般來說，呼叫resolve或reject以後，Promise 的使命就完成了，後繼操作應該放到then方法裡面，而不應該直接寫在resolve或reject的後面。所以，最好在它們前面加上return語句，這樣就不會有意外。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1
// 加return
new Promise((resolve, reject) => {
return resolve(1);
// 後面的語句不會執行
console.log(2);
})
- promise例項的then方法
then方法是定義在原型物件Promise.prototype上的。它的作用是為 Promise 例項新增狀態改變時的回撥函式。前面說過，then方法的第一個引數是resolved狀態的回撥函式，第二個引數（可選）是rejected狀態的回撥函式。
then方法返回的是一個新的Promise例項（注意，不是原來那個Promise例項）。因此可以採用鏈式寫法，即then方法後面再呼叫另一個then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的程式碼使用then方法，依次指定了兩個回撥函式。第一個回撥函式完成以後，會將返回結果作為引數，傳入第二個回撥函式。
採用鏈式的then，可以指定一組按照次序呼叫的回撥函式。這時，前一個回撥函式，有可能返回的還是一個Promise物件（即有非同步操作），這時後一個回撥函式，就會等待該Promise物件的狀態發生變化，才會被呼叫。
-
Promise.prototype.catch()
Promise.prototype.catch方法是.then(null, rejection)的別名，用於指定發生錯誤時的回撥函式。
Promise 物件的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。一般來說，不要在then方法裡面定義 Reject 狀態的回撥函式（即then的第二個引數），總是使用catch方法。
跟傳統的try/catch程式碼塊不同的是，如果沒有使用catch方法指定錯誤處理的回撥函式，Promise 物件丟擲的錯誤不會傳遞到外層程式碼，即不會有任何反應。一般總是建議，Promise 物件後面要跟catch方法，這樣可以處理 Promise 內部發生的錯誤。catch方法返回的還是一個 Promise 物件，因此後面還可以接著呼叫then方法。
-
Promise.prototype.finally()
finally方法用於指定不管 Promise 物件最後狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。promise .then(result => {···}) .catch(error => {···}) .finally(() => {···}); 上面程式碼中，不管promise最後的狀態，在執行完then或catch指定的回撥函式以後，都會執行finally方法指定的回撥函式。
finally方法的回撥函式不接受任何引數，這意味著沒有辦法知道，前面的 Promise 狀態到底是fulfilled還是rejected。這表明，finally方法裡面的操作，應該是與狀態無關的，不依賴於 Promise 的執行結果。finally本質上是then方法的特例。
promise
.finally(() => {
// 語句
});
// 等同於
promise
.then(
result => {
// 語句
return result;
},
error => {
// 語句
throw error;
}
);
上面程式碼中，如果不使用finally方法，同樣的語句需要為成功和失敗兩種情況各寫一次。有了finally方法，則只需要寫一次。
- Promise.all()
Promise.all方法用於將多個 Promise 例項，包裝成一個新的 Promise 例項。
const p = Promise.all([p1, p2, p3]);
上面程式碼中，Promise.all方法接受一個數組作為引數，p1、p2、p3都是 Promise 例項，如果不是，就會先呼叫下面講到的Promise.resolve方法，將引數轉為 Promise 例項，再進一步處理。（Promise.all方法的引數可以不是陣列，但必須具有 Iterator 介面，且返回的每個成員都是 Promise 例項。）
p的狀態由p1、p2、p3決定，分成兩種情況。
（1）只有p1、p2、p3的狀態都變成fulfilled，p的狀態才會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回撥函式。
（2）只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的例項的返回值，會傳遞給p的回撥函式。
- Promise.race()
Promise.race方法同樣是將多個 Promise 例項，包裝成一個新的 Promise 例項。
const p = Promise.race([p1, p2, p3]);
上面程式碼中，只要p1、p2、p3之中有一個例項率先改變狀態，p的狀態就跟著改變。那個率先改變的 Promise 例項的返回值，就傳遞給p的回撥函式。
Promise.race方法的引數與Promise.all方法一樣，如果不是 Promise 例項，就會先呼叫下面講到的Promise.resolve方法，將引數轉為 Promise 例項，再進一步處理。
-
Promise.resolve()
Promise.resolve方法作用就是有時需要將現有物件轉為 Promise 物件。Promise.resolve方法的引數分成四種情況。
（1）引數是一個 Promise 例項
如果引數是 Promise 例項，那麼Promise.resolve將不做任何修改、原封不動地返回這個例項。
（2）引數是一個thenable物件（thenable物件指的是具有then方法的物件）
Promise.resolve方法會將這個物件轉為 Promise 物件，然後就立即執行thenable物件的then方法。
（3）引數不是具有then方法的物件，或根本就不是物件
如果引數是一個原始值，或者是一個不具有then方法的物件，則Promise.resolve方法返回一個新的 Promise 物件，狀態為resolved。
（4）不帶有任何引數
Promise.resolve方法允許呼叫時不帶引數，直接返回一個resolved狀態的 Promise 物件。
所以，如果希望得到一個 Promise 物件，比較方便的方法就是直接呼叫Promise.resolve方法。 -
Promise.reject()
Promise.reject(reason)方法也會返回一個狀態為rejected的新的 Promise 例項。
注意，Promise.reject()方法的引數，會原封不動地作為reject的理由，變成後續方法的引數。這一點與Promise.resolve方法不一致。 -
應用
（1）載入圖片
我們可以將圖片的載入寫成一個Promise，一旦載入完成，Promise的狀態就發生變化。
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
（2）Generator 函式與 Promise 的結合
//使用 Generator 函式管理流程，遇到非同步操作的時候，通常返回一個Promise物件。
function getFoo () {
return new Promise(function (resolve, reject){
resolve('foo');
});
}
const g = function* () {
try {
const foo = yield getFoo();
console.log(foo);
} catch (e) {
console.log(e);
}
};
function run (generator) {
const it = generator();
function go(result) {
if (result.done) return result.value;
return result.value.then(function (value) {
return go(it.next(value));
}, function (error) {
return go(it.throw(error));
});
}
go(it.next());
}
run(g);
//上面程式碼的 Generator 函式g之中，有一個非同步操作getFoo，它返回的就是一個Promise物件。函式run用來處理這個Promise物件，並呼叫下一個next方法。
- Promise.try()
實際開發中，經常遇到一種情況：不知道或者不想區分，函式f是同步函式還是非同步操作，但是想用 Promise 來處理它。因為這樣就可以不管f是否包含非同步操作，都用then方法指定下一步流程，用catch方法處理f丟擲的錯誤。
async函式 或者 new Promise() 可以讓同步函式同步執行，非同步函式非同步執行。
const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next
上面程式碼中，第二行是一個立即執行的匿名函式，會立即執行裡面的async函式，因此如果f是同步的，就會得到同步的結果；如果f是非同步的，就可以用then指定下一步，就像下面的寫法。
(async () => f())()
.then(...)
需要注意的是，async () => f()會吃掉f()丟擲的錯誤。所以，如果想捕獲錯誤，要使用promise.catch方法。
(async () => f())()
.then(...)
.catch(...)
const f = () => console.log('now');
(
() => new Promise(
resolve => resolve(f())
)
)();
console.log('next');
// now
// next
由於Promise.try為所有操作提供了統一的處理機制，所以如果想用then方法管理流程，最好都用Promise.try包裝一下。這樣有許多好處，其中一點就是可以更好地管理異常。
try {
database.users.get({id: userId})
.then(...)
.catch(...)
} catch (e) {
// ...
}
上面這樣的寫法就很笨拙了，這時就可以統一用promise.catch()捕獲所有同步和非同步的錯誤。
Promise.try(database.users.get({id: userId}))
.then(...)
.catch(...)
事實上，Promise.try就是模擬try程式碼塊，就像promise.catch模擬的是catch程式碼塊。