Promise 中的三兄弟 .all(), .race(), .allSettled()
做者：Dr. Axel Rauschmayerhtml
譯者：前端小智前端
來源:2alitygit
阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…github
爲了保證的可讀性，本文采用意譯而非直譯。編程
從ES6 開始，咱們大都使用的是 Promise.all()和Promise.race()，Promise.allSettled() 提案已經到第4階段，所以將會成爲ECMAScript 2020的一部分。後端
1.概述
Promise.all(promises: Iterable<Promise>): Promise<Array>數組
Promise.all(iterable)方法返回一個Promise實例，此實例在iterable參數內全部的promise都「完成（resolved）」或參數中不包含promise時回調完成（resolve）；若是參數中promise有一個失敗（rejected），此實例回調失敗（reject），失敗緣由的是第一個失敗promise的結果
Promise.race(promises: Iterable<Promise>): Promisepromise
- Promise.race(iterable) 方法返回一個
promise，一旦迭代器中的某個promise解決或拒絕，返回的promise就會解決或拒絕。
Promise.allSettled(promises: Iterable<Promise>): Promise<Array<SettlementObject>>安全
- **Promise.allSettled()**方法返回一個
promise，該promise在全部給定的promise已被解析或被拒絕後解析，而且每一個對象都描述每一個promise的結果。
回顧: Promise 狀態
給定一個返回Promise的異步操做，如下這些是Promise的可能狀態：併發
- pending: 初始狀態，既不是成功，也不是失敗狀態。
- fulfilled: 意味着操做成功完成。
- rejected: 意味着操做失敗。
- Settled：
Promise要麼被完成，要麼被拒絕。Promise一旦達成，它的狀態就再也不改變。
3.什麼是組合
又稱部分-總體模式，將對象整合成樹形結構以表示「部分總體」的層次結構。組合模式使得用戶對單個對象和組合對象的使用具備一致性，它基於兩種函數：
- 基元函數(簡短:基元)建立原子塊。
- 組合函數（簡稱：組合）將原子和/或複合件組合在一塊兒以造成複合件。
對於 JS 的 Promises 來講
-
基元函數包括:
Promise.resolve()、Promise.reject() -
組合函數：
Promise.all(),Promise.race(),Promise.allSettled()
4. Promise.all()
Promise.all()的類型簽名:
- Promise.all(promises: Iterable<Promise>): Promise<Array>
返回狀況：
完成（Fulfillment）： 若是傳入的可迭代對象爲空，Promise.all 會同步地返回一個已完成（resolved）狀態的promise。 若是全部傳入的 promise 都變爲完成狀態，或者傳入的可迭代對象內沒有 promise，Promise.all 返回的 promise 異步地變爲完成。 在任何狀況下，Promise.all 返回的 promise 的完成狀態的結果都是一個數組，它包含全部的傳入迭代參數對象的值（也包括非 promise 值）。
失敗/拒絕（Rejection）： 若是傳入的 promise 中有一個失敗（rejected），Promise.all 異步地將失敗的那個結果給失敗狀態的回調函數，而無論其它 promise 是否完成。
來個例子：
const promises = [
Promise.resolve('a'),
Promise.resolve('b'),
Promise.resolve('c'),
];
Promise.all(promises)
.then((arr) => assert.deepEqual(
arr, ['a', 'b', 'c']
));
複製代碼
若是其中的一個 promise 被拒絕，那麼又是什麼狀況：
const promises = [
Promise.resolve('a'),
Promise.resolve('b'),
Promise.reject('ERROR'),
];
Promise.all(promises)
.catch((err) => assert.equal(
err, 'ERROR'
));
複製代碼
下圖說明Promise.all()是如何工做的
4.1 異步 .map() 與 Promise.all()
數組轉換方法，如.map()、.filter()等，用於同步計算。例如
function timesTwoSync(x) {
return 2 * x;
}
const arr = [1, 2, 3];
const result = arr.map(timesTwoSync);
assert.deepEqual(result, [2, 4, 6]);
複製代碼
若是.map()的回調是基於Promise的函數會發生什麼？ 使用這種方式 .map()返回的的結果是一個Promises數組。
Promises數組不是普通代碼可使用的數據，但咱們能夠經過Promise.all()來解決這個問題：它將Promises數組轉換爲Promise，並使用一組普通值數組來實現。
function timesTwoAsync(x) {
return new Promise(resolve => resolve(x * 2));
}
const arr = [1, 2, 3];
const promiseArr = arr.map(timesTwoAsync);
Promise.all(promiseArr)
.then(result => {
assert.deepEqual(result, [2, 4, 6]);
});
複製代碼
更實際工做上關於 .map()示例
接下來，我們使用.map()和Promise.all()從Web下載文件。 首先，我們須要如下幫助函數：
function downloadText(url) {
return fetch(url)
.then((response) => { // (A)
if (!response.ok) { // (B)
throw new Error(response.statusText);
}
return response.text(); // (C)
});
}
複製代碼
downloadText()使用基於Promise的fetch API 以字符串流的方式下載文件：
-
首先，它異步檢索響應（第A行）。
-
response.ok（B行）檢查是否存在「找不到文件」等錯誤。
-
若是沒有錯誤，使用
.text()(第C行)以字符串的形式取回文件的內容。
在下面的示例中，我們 下載了兩個文件
const urls = [
'http://example.com/first.txt',
'http://example.com/second.txt',
];
const promises = urls.map(
url => downloadText(url));
Promise.all(promises)
.then(
(arr) => assert.deepEqual(
arr, ['First!', 'Second!']
));
複製代碼
Promise.all()的一個簡版實現
function all(iterable) {
return new Promise((resolve, reject) => {
let index = 0;
for (const promise of iterable) {
// Capture the current value of `index`
const currentIndex = index;
promise.then(
(value) => {
if (anErrorOccurred) return;
result[currentIndex] = value;
elementCount++;
if (elementCount === result.length) {
resolve(result);
}
},
(err) => {
if (anErrorOccurred) return;
anErrorOccurred = true;
reject(err);
});
index++;
}
if (index === 0) {
resolve([]);
return;
}
let elementCount = 0;
let anErrorOccurred = false;
const result = new Array(index);
});
}
複製代碼
##5. Promise.race()
Promise.race()方法的定義：
Promise.race(promises: Iterable<Promise>): Promise
Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。來幾個例子，瞧瞧：
const promises = [
new Promise((resolve, reject) =>
setTimeout(() => resolve('result'), 100)), // (A)
new Promise((resolve, reject) =>
setTimeout(() => reject('ERROR'), 200)), // (B)
];
Promise.race(promises)
.then((result) => assert.equal( // (C)
result, 'result'));
複製代碼
在第 A 行，Promise 是完成狀態 ，因此 第 C 行會執行（儘管第 B 行被拒絕）。
若是 Promise 被拒絕首先執行，在來看看狀況是嘛樣的：
const promises = [
new Promise((resolve, reject) =>
setTimeout(() => resolve('result'), 200)),
new Promise((resolve, reject) =>
setTimeout(() => reject('ERROR'), 100)),
];
Promise.race(promises)
.then(
(result) => assert.fail(),
(err) => assert.equal(
err, 'ERROR'));
複製代碼
注意，因爲 Promse 先被拒絕，因此 Promise.race() 返回的是一個被拒絕的 Promise
這意味着Promise.race（[]）的結果永遠不會完成。
下圖演示了Promise.race()的工做原理：
Promise.race() 在 Promise 超時下的狀況
在本節中，咱們將使用Promise.race()來處理超時的 Promise。 如下輔助函數:
function resolveAfter(ms, value=undefined) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(value), ms);
});
}
複製代碼
resolveAfter() 主要作的是在指定的時間內，返回一個狀態爲 resolve 的 Promise，值爲爲傳入的 value
調用上面方法：
function timeout(timeoutInMs, promise) {
return Promise.race([
promise,
resolveAfter(timeoutInMs,
Promise.reject(new Error('Operation timed out'))),
]);
}
複製代碼
timeout() 返回一個Promise，該 Promise 的狀態取決於傳入 promise 狀態 。
其中 timeout 函數中的 resolveAfter(timeoutInMs, Promise.reject(new Error('Operation timed out')) ，經過 resolveAfter 定義可知，該結果返回的是一個被拒絕狀態的 Promise。
再來看看timeout(timeoutInMs, promise)的運行狀況。若是傳入promise在指定的時間以前狀態爲完成時，timeout 返回結果就是一個完成狀態的 Promise,能夠經過.then的第一個回調參數處理返回的結果。
timeout(200, resolveAfter(100, 'Result!'))
.then(result => assert.equal(result, 'Result!'));
複製代碼
相反，若是是在指定的時間以後完成，剛 timeout 返回結果就是一個拒絕狀態的 Promise,從而觸發catch方法指定的回調函數。
timeout(100, resolveAfter(2000, 'Result!'))
.catch(err => assert.deepEqual(err, new Error('Operation timed out')));
複製代碼
重要的是要了解「Promise 超時」的真正含義：
- 若是傳入入
Promise較到的獲得解決，其結果就會給返回的Promise。 - 若是沒有足夠快獲得解決，輸出的
Promise的狀態爲拒絕。
也就是說，超時只會阻止傳入的Promise，影響輸出 Promise（由於Promise只能解決一次）， 但它並無阻止傳入Promise的異步操做。
5.2 Promise.race() 的一個簡版實現
如下是 Promise.race()的一個簡化實現(它不執行安全檢查)
function race(iterable) {
return new Promise((resolve, reject) => {
for (const promise of iterable) {
promise.then(
(value) => {
if (settlementOccurred) return;
settlementOccurred = true;
resolve(value);
},
(err) => {
if (settlementOccurred) return;
settlementOccurred = true;
reject(err);
});
}
let settlementOccurred = false;
});
}
複製代碼
6.Promise.allSettled()
「Promise.allSettled」這一特性是由Jason Williams，Robert Pamely和Mathias Bynens提出。
promise.allsettle()方法的定義：
- Promise.allSettled(promises: Iterable<Promise>) : Promise<Array<SettlementObject>>
它返回一個Array的Promise，其元素具備如下類型特徵：
type SettlementObject<T> = FulfillmentObject<T> | RejectionObject;
interface FulfillmentObject<T> {
status: 'fulfilled';
value: T;
}
interface RejectionObject {
status: 'rejected';
reason: unknown;
}
複製代碼
Promise.allSettled()方法返回一個promise，該promise在全部給定的promise已被解析或被拒絕後解析，而且每一個對象都描述每一個promise的結果。
舉例說明, 好比各位用戶在頁面上面同時填了3個獨立的表單, 這三個表單分三個接口提交到後端, 三個接口獨立, 沒有順序依賴, 這個時候咱們須要等到請求所有完成後給與用戶提示表單提交的狀況
在多個promise同時進行時我們很快會想到使用Promise.all來進行包裝, 可是因爲Promise.all的短路特性, 三個提交中若前面任意一個提交失敗, 則後面的表單也不會進行提交了, 這就與我們需求不符合.
Promise.allSettled跟Promise.all相似, 其參數接受一個Promise的數組, 返回一個新的Promise, 惟一的不一樣在於, 其不會進行短路, 也就是說當Promise所有處理完成後咱們能夠拿到每一個Promise的狀態, 而無論其是否處理成功.
下圖說明promise.allsettle()是如何工做的
6.1 Promise.allSettled() 例子
這是Promise.allSettled() 使用方式快速演示示例
Promise.allSettled([
Promise.resolve('a'),
Promise.reject('b'),
])
.then(arr => assert.deepEqual(arr, [
{ status: 'fulfilled', value: 'a' },
{ status: 'rejected', reason: 'b' },
]));
複製代碼
6.2 Promise.allSettled() 較複雜點的例子
這個示例相似於.map()和Promise.all()示例(咱們從其中借用了downloadText()函數):咱們下載多個文本文件，這些文件的url存儲在一個數組中。可是，這一次，我們不但願在出現錯誤時中止，而是但願繼續執行。Promise.allSettled()容許我們這樣作：
const urls = [
'http://example.com/exists.txt',
'http://example.com/missing.txt',
];
const result = Promise.allSettled(
urls.map(u => downloadText(u)));
result.then(
arr => assert.deepEqual(
arr,
[
{
status: 'fulfilled',
value: 'Hello!',
},
{
status: 'rejected',
reason: new Error('Not Found'),
},
]
));
複製代碼
6.3 Promise.allSettled() 的簡化實現
這是promise.allsettle()的簡化實現(不執行安全檢查)
function allSettled(iterable) {
return new Promise((resolve, reject) => {
function addElementToResult(i, elem) {
result[i] = elem;
elementCount++;
if (elementCount === result.length) {
resolve(result);
}
}
let index = 0;
for (const promise of iterable) {
// Capture the current value of `index`
const currentIndex = index;
promise.then(
(value) => addElementToResult(
currentIndex, {
status: 'fulfilled',
value
}),
(reason) => addElementToResult(
currentIndex, {
status: 'rejected',
reason
}));
index++;
}
if (index === 0) {
resolve([]);
return;
}
let elementCount = 0;
const result = new Array(index);
});
}
複製代碼
7. 短路特性
Promise.all() 和 romise.race() 都具備 短路特性
- Promise.all()： 若是參數中
promise有一個失敗（rejected），此實例回調失敗（reject）
Promise.race()：若是參數中某個promise解決或拒絕，返回的 promise就會解決或拒絕。
8.併發性和 Promise.all()
8.1 順序執行與併發執行
考慮下面的代碼：
asyncFunc1()
.then(result1 => {
assert.equal(result1, 'one');
return asyncFunc2();
})
.then(result2 => {
assert.equal(result2, 'two');
});
複製代碼
使用.then()順序執行基於Promise的函數：只有在 asyncFunc1()的結果被解決後纔會執行asyncFunc2() 。
而 Promise.all() 是併發執行的
Promise.all([asyncFunc1(), asyncFunc2()])
.then(arr => {
assert.deepEqual(arr, ['one', 'two']);
});
複製代碼
9.2 併發技巧：關注操做什麼時候開始
肯定併發異步代碼的技巧:關注異步操做什麼時候啓動，而不是如何處理它們的Promises。
例如，下面的每一個函數都同時執行asyncFunc1()和asyncFunc2()，由於它們幾乎同時啓動。
function concurrentAll() {
return Promise.all([asyncFunc1(), asyncFunc2()]);
}
function concurrentThen() {
const p1 = asyncFunc1();
const p2 = asyncFunc2();
return p1.then(r1 => p2.then(r2 => [r1, r2]));
}
複製代碼
另外一方面，如下兩個函數依次執行asyncFunc1()和asyncFunc2(): asyncFunc2()僅在asyncFunc1()的解決以後才調用。
function sequentialThen() {
return asyncFunc1()
.then(r1 => asyncFunc2()
.then(r2 => [r1, r2]));
}
function sequentialAll() {
const p1 = asyncFunc1();
const p2 = p1.then(() => asyncFunc2());
return Promise.all([p1, p2]);
}
複製代碼
9.3 Promise.all() 與 Fork-Join 分治編程
Promise.all() 與併發模式「fork join」鬆散相關。重溫一下我們前面的一個例子：
Promise.all([
// (A) fork
downloadText('http://example.com/first.txt'),
downloadText('http://example.com/second.txt'),
])
// (B) join
.then(
(arr) => assert.deepEqual(
arr, ['First!', 'Second!']
));
複製代碼
- Fork：在
A行中，分割兩個異步任務並同時執行它們。 - Join：在
B行中，對每一個小任務獲得的結果進行彙總。
代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。
交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）
爲了回饋讀者，《大遷世界》不按期舉行(每月一到三次)，現金抽獎活動，保底200，外加用戶讚揚，但願你能成爲大遷世界的小錦鯉，快來試試吧
乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。
我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！
關注公衆號，後臺回覆福利，便可看到福利，你懂的。
每次整理文章，通常都到2點才睡覺，一週4次左右，挺苦的，還望支持，給點鼓勵
- 1. Promise 中的三兄弟 .all(), .race(), .allSettled()
- 2. Promise | all、race 方法（代碼版）
- 3. 聽說你還不知道Promise的allSettled()和all()的區別？
- 4. 手寫Promise，1.7promise中all(),race(),resolve(),cath(),finally()的實現
- 5. 扁鵲三兄弟
- 6. Promise Race, 並不公平的 Race
- 7. JavaScript中的promise（二）
- 8. 工廠三兄弟設計模式
- 9. ArrayList、LinkedList和Vector三兄弟的區別
- 10. 嘿，兄弟！
- 更多相關文章...
- • Spring中Bean的作用域 - Spring教程
- • 現實生活中的 XML - XML 教程
- • C# 中 foreach 遍歷的用法
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. Promise 中的三兄弟 .all(), .race(), .allSettled()
- 2. Promise | all、race 方法（代碼版）
- 3. 聽說你還不知道Promise的allSettled()和all()的區別？
- 4. 手寫Promise，1.7promise中all(),race(),resolve(),cath(),finally()的實現
- 5. 扁鵲三兄弟
- 6. Promise Race, 並不公平的 Race
- 7. JavaScript中的promise（二）
- 8. 工廠三兄弟設計模式
- 9. ArrayList、LinkedList和Vector三兄弟的區別
- 10. 嘿，兄弟！