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方法。