溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Promise中all()、race()、allSettled()的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
Promise.all
Promise.all(iterable) 方法返回一個 Promise 實例，此實例在 iterable 參數(shù)內(nèi)所有的 promise 都“完成（resolved）”或參數(shù)中不包含 promise 時回調(diào)完成（resolve）；如果參數(shù)中 promise 有一個失?。╮ejected），此實例回調(diào)失?。╮eject），失敗原因的是第一個失敗 promise 的結(jié)果
Promise.race
Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。
Promise.allSettled
Promise.allSettled()方法返回一個promise，該promise在所有給定的promise已被解析或被拒絕后解析，并且每個對象都描述每個promise的結(jié)果。
給定一個返回Promise的異步操作，以下這些是Promise的可能狀態(tài)：
pending: 初始狀態(tài)，既不是成功，也不是失敗狀態(tài)。
fulfilled: 意味著操作成功完成。
rejected: 意味著操作失敗。
Settled： Promise要么被完成，要么被拒絕。Promise一旦達成，它的狀態(tài)就不再改變。
又稱部分-整體模式，將對象整合成樹形結(jié)構(gòu)以表示“部分整體”的層次結(jié)構(gòu)。組合模式使得用戶對單個對象和組合對象的使用具有一致性，它基于兩種函數(shù)：
基元函數(shù)(簡短:基元)創(chuàng)建原子塊。
組合函數(shù)（簡稱：組合）將原子和/或復合件組合在一起以形成復合件。
對于 JS 的 Promises 來說
基元函數(shù)包括:Promise.resolve()、Promise.reject()
組合函數(shù)：Promise.all(), Promise.race(), Promise.allSettled()
Promise.all()的類型簽名:
Promise.all
返回情況：
完成（Fulfillment）：
如果傳入的可迭代對象為空，Promise.all 會同步地返回一個已完成（resolved）狀態(tài)的promise。
如果所有傳入的 promise 都變?yōu)橥瓿蔂顟B(tài)，或者傳入的可迭代對象內(nèi)沒有 promise，Promise.all 返回的 promise 異步地變?yōu)橥瓿伞?br/>在任何情況下，Promise.all 返回的 promise 的完成狀態(tài)的結(jié)果都是一個數(shù)組，它包含所有的傳入迭代參數(shù)對象的值（也包括非 promise 值）。
失敗/拒絕（Rejection）：
如果傳入的 promise 中有一個失?。?code>rejected），Promise.all 異步地將失敗的那個結(jié)果給失敗狀態(tài)的回調(diào)函數(shù)，而不管其它 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()是如何工作的
數(shù)組轉(zhuǎn)換方法，如.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()的回調(diào)是基于Promise的函數(shù)會發(fā)生什么？ 使用這種方式 .map()返回的的結(jié)果是一個Promises數(shù)組。
Promises數(shù)組不是普通代碼可以使用的數(shù)據(jù)，但我們可以通過Promise.all()來解決這個問題：它將Promises數(shù)組轉(zhuǎn)換為Promise，并使用一組普通值數(shù)組來實現(xiàn)。
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()和Promise.all()從Web下載文件。 首先，咱們需要以下幫助函數(shù)：
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行)以字符串的形式取回文件的內(nèi)容。
在下面的示例中，咱們 下載了兩個文件
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!'] ));
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);
});
}Promise.race()方法的定義：
Promise.race
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 是完成狀態(tài) ，所以 第 C 行會執(zhí)行（盡管第 B 行被拒絕）。
如果 Promise 被拒絕首先執(zhí)行，在來看看情況是嘛樣的：
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（[]）的結(jié)果永遠不會完成。
下圖演示了Promise.race()的工作原理：
在本節(jié)中，我們將使用Promise.race()來處理超時的 Promise。 以下輔助函數(shù):
function resolveAfter(ms, value=undefined) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(value), ms);
});
}resolveAfter() 主要做的是在指定的時間內(nèi)，返回一個狀態(tài)為 resolve 的 Promise，值為為傳入的 value
調(diào)用上面方法：
function timeout(timeoutInMs, promise) {
return Promise.race([
promise,
resolveAfter(timeoutInMs,
Promise.reject(new Error('Operation timed out'))),
]);
}timeout() 返回一個Promise，該 Promise 的狀態(tài)取決于傳入 promise 狀態(tài) 。
其中 timeout 函數(shù)中的 resolveAfter(timeoutInMs, Promise.reject(new Error('Operation timed out')) ，通過 resolveAfter 定義可知，該結(jié)果返回的是一個被拒絕狀態(tài)的 Promise。
再來看看timeout(timeoutInMs, promise)的運行情況。如果傳入promise在指定的時間之前狀態(tài)為完成時，timeout 返回結(jié)果就是一個完成狀態(tài)的 Promise,可以通過.then的第一個回調(diào)參數(shù)處理返回的結(jié)果。
timeout(200, resolveAfter(100, 'Result!')) .then(result => assert.equal(result, 'Result!'));
相反，如果是在指定的時間之后完成，剛 timeout 返回結(jié)果就是一個拒絕狀態(tài)的 Promise,從而觸發(fā)catch方法指定的回調(diào)函數(shù)。
timeout(100, resolveAfter(2000, 'Result!'))
.catch(err => assert.deepEqual(err, new Error('Operation timed out')));重要的是要了解“Promise 超時”的真正含義：
如果傳入入Promise 較到的得到解決，其結(jié)果就會給返回的 Promise。
如果沒有足夠快得到解決，輸出的 Promise 的狀態(tài)為拒絕。
也就是說，超時只會阻止傳入的Promise，影響輸出 Promise（因為Promise只能解決一次）， 但它并沒有阻止傳入Promise的異步操作。
以下是 Promise.race()的一個簡化實現(xiàn)(它不執(zhí)行安全檢查)
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;
});
}“Promise.allSettled”這一特性是由Jason Williams，Robert Pamely和Mathias Bynens提出。
promise.allsettle()方法的定義：
Promise.allSettled
它返回一個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的結(jié)果。
舉例說明, 比如各位用戶在頁面上面同時填了3個獨立的表單, 這三個表單分三個接口提交到后端, 三個接口獨立, 沒有順序依賴, 這個時候我們需要等到請求全部完成后給與用戶提示表單提交的情況
在多個promise同時進行時咱們很快會想到使用Promise.all來進行包裝, 但是由于Promise.all的短路特性, 三個提交中若前面任意一個提交失敗, 則后面的表單也不會進行提交了, 這就與咱們需求不符合.
Promise.allSettled跟Promise.all類似, 其參數(shù)接受一個Promise的數(shù)組, 返回一個新的Promise, 唯一的不同在于, 其不會進行短路, 也就是說當Promise全部處理完成后我們可以拿到每個Promise的狀態(tài), 而不管其是否處理成功.
下圖說明promise.allsettle()是如何工作的
這是Promise.allSettled() 使用方式快速演示示例
Promise.allSettled([
Promise.resolve('a'),
Promise.reject('b'),
])
.then(arr => assert.deepEqual(arr, [
{ status: 'fulfilled', value: 'a' },
{ status: 'rejected', reason: 'b' },
]));這個示例類似于.map()和Promise.all()示例(我們從其中借用了downloadText()函數(shù)):我們下載多個文本文件，這些文件的url存儲在一個數(shù)組中。但是，這一次，咱們不希望在出現(xiàn)錯誤時停止，而是希望繼續(xù)執(zhí)行。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'),
},
]
));這是promise.allsettle()的簡化實現(xiàn)(不執(zhí)行安全檢查)
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);
});
}Promise.all() 和 romise.race() 都具有 短路特性
Promise.all()： 如果參數(shù)中 promise 有一個失?。╮ejected），此實例回調(diào)失?。╮eject）
Promise.race()：如果參數(shù)中某個promise解決或拒絕，返回的 promise就會解決或拒絕。
考慮下面的代碼：
asyncFunc1()
.then(result1 => {
assert.equal(result1, 'one');
return asyncFunc2();
})
.then(result2 => {
assert.equal(result2, 'two');
});使用.then()順序執(zhí)行基于Promise的函數(shù)：只有在 asyncFunc1()的結(jié)果被解決后才會執(zhí)行asyncFunc2() 。
而 Promise.all() 是并發(fā)執(zhí)行的
Promise.all([asyncFunc1(), asyncFunc2()])
.then(arr => {
assert.deepEqual(arr, ['one', 'two']);
});確定并發(fā)異步代碼的技巧:關注異步操作何時啟動，而不是如何處理它們的Promises。
例如，下面的每個函數(shù)都同時執(zhí)行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]));
}另一方面，以下兩個函數(shù)依次執(zhí)行asyncFunc1()和asyncFunc2(): asyncFunc2()僅在asyncFunc1()的解決之后才調(diào)用。
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]);
}Promise.all() 與并發(fā)模式“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行中，分割兩個異步任務并同時執(zhí)行它們。
Join：在B行中，對每個小任務得到的結(jié)果進行匯總。
感謝各位的閱讀！關于Promise中all()、race()、allSettled()的示例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
