es6 javascript的Promise對象（下）

5 Promise.all()

Promise.all方法用於將多個 Promise 執行個體， 封裝成一個新的 Promise 執行個體。
var 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 對象的數組var promises = [2, 3, 5, 7, 11, 13].map(function(id) {return getJSON("/post/" + id + ".json");});Promise.all(promises).then(function(posts) {// ...}).catch(function(reason) {// ...});

上面代碼中， promises是包含 6 個 Promise 執行個體的數組， 只有這 6 個執行個體的狀態都變成fulfilled， 或者其中有一個變為rejected， 才會調用Promise.all方法後面的回呼函數。
下面是另一個例子。

const databasePromise = connectDatabase();const booksPromise = databaseProimse.then(findAllBooks);const userPromise = databasePromise.then(getCurrentUser);Promise.all([booksPromise,userPromise]).then(([books, user]) => pickTopRecommentations(books, user));

上面代碼中， booksPromise和userPromise是兩個非同步作業， 只有等到它們的結果都返回了， 才會觸發pickTopRecommentations這個回呼函數。

6 Promise.race()

Promise.race方法同樣是將多個 Promise 執行個體， 封裝成一個新的 Promise 執行個體。

var p = Promise.race([p1, p2, p3]);

上面代碼中， 只要p1、 p2、 p3之中有一個執行個體率先改變狀態， p的狀態就跟著改變。 那個率先改變的 Promise 執行個體的傳回值， 就傳遞給p的回呼函數。
Promise.race方法的參數與Promise.all方法一樣， 如果不是 Promise 執行個體， 就會先調用下面講到的Promise.resolve方法， 將參數轉為 Promise 執行個體，再進一步處理。
下面是一個例子， 如果指定時間內沒有獲得結果， 就將 Promise 的狀態變為reject， 否則變為resolve。

var p = Promise.race([fetch('/resource-that-may-take-a-while'),new Promise(function(resolve, reject) {setTimeout(() => reject(new Error('request timeout')), 5000)})])p.then(response => console.log(response))p.catch(error => console.log(error))

上面代碼中， 如果 5 秒之內fetch方法無法返回結果， 變數p的狀態就會變為rejected， 從而觸發catch方法指定的回呼函數。

7 Promise.resolve()

有時需要將現有對象轉為 Promise 對象， Promise.resolve方法就起到這個作用。

var jsPromise = Promise.resolve($.ajax('/whatever.json'));

上面代碼將 jQuery 產生的deferred對象， 轉為一個新的 Promise 對象。
Promise.resolve等價於下面的寫法。

Promise.resolve('foo')//  等價於new Promise(resolve => resolve('foo'))

Promise.resolve方法的參數分成四種情況。
（ 1） 參數是一個 Promise 執行個體如果參數是 Promise 執行個體， 那麼Promise.resolve將不做任何修改、 原封不動地返回這個執行個體。
（ 2） 參數是一個thenable 對象
thenable對象指的是具有then方法的對象， 比如下面這個對象。

let thenable = {then: function(resolve, reject) {resolve(42);}};

Promise.resolve方法會將這個對象轉為 Promise 對象， 然後就立即執行thenable對象的then方法。

let thenable = {then: function(resolve, reject) {resolve(42);}};let p1 = Promise.resolve(thenable);p1.then(function(value) {console.log(value); // 42});

上面代碼中， thenable對象的then方法執行後， 對象p1的狀態就變為resolved， 從而立即執行最後那個then方法指定的回呼函數， 輸出 42。
（ 3） 參數不是具有then 方法的對象， 或根本就不是對象
如果參數是一個原始值， 或者是一個不具有then方法的對象， 則Promise.resolve方法返回一個新的 Promise 對象， 狀態為Resolved。

var p = Promise.resolve('Hello');p.then(function(s) {console.log(s)});// Hello

上面代碼產生一個新的 Promise 對象的執行個體p。 由於字串Hello不屬於非同步作業（ 判斷方法是它不是具有 then 方法的對象）， 返回 Promise 執行個體的狀態從一產生就是Resolved， 所以回呼函數會立即執行。 Promise.resolve方法的參數， 會同時傳給回呼函數。
（ 4） 不帶有任何參數
Promise.resolve方法允許調用時不帶參數， 直接返回一個Resolved狀態的 Promise 對象。
所以， 如果希望得到一個 Promise 對象， 比較方便的方法就是直接調用Promise.resolve方法。

var p = Promise.resolve();p.then(function() {// ...});

上面代碼的變數p就是一個 Promise 對象。
需要注意的是， 立即resolve的 Promise 對象， 是在本輪“ 事件迴圈”（ event loop） 的結束時， 而不是在下一輪“ 事件迴圈” 的開始時。

setTimeout(function() {console.log('three');}, 0);Promise.resolve().then(function() {console.log('two');});console.log('one');// one// two// three

上面代碼中， setTimeout(fn, 0) 在下一輪“ 事件迴圈” 開始時執行， Promise.resolve() 在本輪“ 事件迴圈” 結束時執行， console.log(’one‘) 則是立即執行， 因此最先輸出。

8 Promise.reject()

Promise.reject(reason) 方法也會返回一個新的 Promise 執行個體， 該執行個體的狀態為rejected。 它的參數用法與Promise.resolve方法完全一致。

var p = Promise.reject(' 出錯了 ');//  等同於var p = new Promise((resolve, reject) => reject(' 出錯了 '))p.then(null, function(s) {console.log(s)});//  出錯了

上面代碼產生一個 Promise 對象的執行個體p， 狀態為rejected， 回呼函數會立即執行。

9 兩個有用的附加方法

ES6 的 Promise API 提供的方法不是很多， 有些有用的方法可以自己部署。 下面介紹如何部署兩個不在 ES6 之中、 但很有用的方法。

9.1 done()

Promise 對象的回調鏈， 不管以then方法或catch方法結尾， 要是最後一個方法拋出錯誤， 都有可能無法捕捉到（ 因為 Promise 內部的錯誤不會冒泡到全域）。 因此， 我們可以提供一個done方法， 總是處於回調鏈的尾端， 保證拋出任何可能出現的錯誤。

asyncFunc().then(f1).catch(r1).then(f2).done();

它的實現代碼相當簡單。

Promise.prototype.done = function(onFulfilled, onRejected) {this.then(onFulfilled, onRejected).catch(function(reason) {//  拋出一個全域錯誤setTimeout(() => {throw reason}, 0);});};

從上面代碼可見， done方法的使用， 可以像then方法那樣用， 提供Fulfilled和Rejected狀態的回呼函數， 也可以不提供任何參數。 但不管怎樣， done都會捕捉到任何可能出現的錯誤， 並向全域拋出。

9.2 finally()

finally方法用於指定不管 Promise 對象最後狀態如何， 都會執行的操作。 它與done方法的最大區別， 它接受一個普通的回呼函數作為參數， 該函數不管怎樣都必須執行。
下面是一個例子， 伺服器使用 Promise 處理請求， 然後使用finally方法關掉伺服器。

server.listen(0).then(function() {// run test}).finally(server.stop);

它的實現也很簡單。

Promise.prototype.finally = function(callback) {let P = this.constructor;return this.then(value => P.resolve(callback()).then(() => value),reason => P.resolve(callback()).then(() => {throw reason}));};

上面代碼中， 不管前面的 Promise 是fulfilled還是rejected， 都會執行回呼函數callback。

10 應用

10.1 載入圖片

我們可以將圖片的載入寫成一個Promise， 一旦載入完成， Promise的狀態就發生變化。

const preloadImage = function(path) {return new Promise(function(resolve, reject) {var image = new Image();image.onload = resolve;image.onerror = reject;image.src = path;});};

10.2 Generator 函數與 Promise 的結合

使用 Generator 函數管理流程， 遇到非同步作業的時候， 通常返回一個Promise對象。

function getFoo() {return new Promise(function(resolve, reject) {resolve('foo');});}var g = function*() {try {var foo = yield getFoo();console.log(foo);} catch(e) {console.log(e);}};function run(generator) {var 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方法。