深入解析Promise.allSettled()的使用方法

如何使用Promise.allSettled()？下面這篇文章就來帶大家了解Promise.allSettled()，介紹一下它的使用方法，希望對大家有幫助！

Promise.allSettled() 方法傳回一個在所有給定的promise 都已經fulfilled 或rejected 後的promise，並帶有一個物件數組，每個物件表示對應的promise 結果。

接著，我們來看看 Promise.allSettled() 是如何運作的。

1. Promise.allSettled()

#Promise.allSettled() 可用於並行執行獨立的非同步操作，並收集這些操作的結果。

此函數接受一個promise 陣列(通常是可迭代物件)作為參數:

const statusesPromise = Promise.allSettled(promises);

當所有的輸入promises 都被fulfilled 或rejected 時，statusesPromise 會解析為一個具有它們狀態的陣列

• { status: 'fulfilled', 值：value } — 如果對應的promise 已fulfilled

• ##或

  {status: 'rejected'，reason: reason } 如果對應的promise 已經被rejected

#在解析所有promises 之後，可以使用

then 語法提取它們的狀態:

statusesPromise.then(statuses => {
 statuses; // [{ status: '...', value: '...' }, ...]
});

或使用

async/await 語法：

const statuses = await statusesPromise;
statuses; // [{ status: '...', value: '...' }, ...]

2. 取水果和蔬菜

在深入研究

Promise.allSettle() 之前，我們先定義兩個簡單的helper 函數。

首先，

resolveTimeout(value, delay)回傳一個promise ，該promise 在經過delay 時間後用value 來實作

function resolveTimeout(value, delay) {
  return new Promise(
    resolve => setTimeout(() => resolve(value), delay)
  );
}

第二，

rejectTimeout(reason, delay) - 回傳一個promise，在經過delay 時間後拒絕reason。

最後，我們使用這些輔助函數來試驗

promise.allsettle()。

2.1 All promises fulfilled

我們同時造訪當地雜貨店的蔬菜和水果。存取每個清單是一個非同步操作:

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  resolveTimeout(['oranges', 'apples'], 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'fulfilled', value: ['oranges', 'apples'] }
// ]

線上範例：https://codesandbox.io/s/all-resolved-yyc0l?file=/src/index.js

Promise.allSettled([...])返回一個promise  statusesPromise，該promise 在1秒內解決，就在蔬菜和水果解決之後，並行地解決。

statusesPromise 解析為一個包含狀態的陣列。

• 陣列的第一項包含有蔬菜的已完成狀態:

  status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

• 相同的方式，第二項是水果的完成狀態:

  { status: 'fulfilled', value: ['oranges', 'apples'] }

#2.2一個promise 被拒絕

#想像一下，在雜貨店裡已經沒有水果了。在這種情況下，我們拒絕水果的 promise。

promise.allsettle() 在這種情況下如何運作?

const statusesPromise = Promise.allSettled([
  resolveTimeout(['potatoes', 'tomatoes'], 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'fulfilled', value: ['potatoes', 'tomatoes'] },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

線上範例：https://codesandbox.io/s/one -rejected-ij3uo?file=/src/index.js

#Promise.allSettled([...]) 傳回的promise 在1 秒後來解析為一個狀態數組:

• 數組的第一項，蔬菜

  promise 成功解析：{ status: 'fulfilled', value: [' potatoes', 'tomatoes'] }

• 第二項，因為水果promise  被拒絕，所以是一個拒絕狀態:

  { status: 'rejected', reason : Error('Out of fruits') }

即使輸入陣列中的第二個promise  被拒絕，

statusesPromise仍然會成功解析一個狀態數組。

2.3 所有的 promises 都被 rejected

如果雜貨店裡的蔬菜水果都賣光了怎麼辦？在這種情況下，兩個 promise 都會被拒絕。

const statusesPromise = Promise.allSettled([
  rejectTimeout(new Error('Out of vegetables!'), 1000),
  rejectTimeout(new Error('Out of fruits!'), 1000)
]);
// wait...
const statuses = await statusesPromise;
// after 1 second
console.log(statuses); 
// [
//   { status: 'rejected', reason: Error('Out of vegetables!')  },
//   { status: 'rejected', reason: Error('Out of fruits!') }
// ]

線上範例：https://codesandbox.io/s/all-rejected-z4jee?file=/src/index.js

在這種情況下，

statusesPromise仍然成功地解析為一個狀態數組。然而，該數組包含被拒絕的promise 的狀態。

3.總​​結

Promise.allSettled(promises)可以並行地運行promise，並將狀態（fulfilled 或reject）收集到一個聚合數組中。

Promise.allSettled(...)在你需要執行平行和獨立的非同步操作並收集所有結果時非常有效，即使某些非同步操作可能失敗。

英文原文網址：https://dmitripavlutin.com/promise-all-settled/

作者：Dmitri Pavlutin

更多程式相關知識，請訪問：編程視頻！ ！

以上是深入解析Promise.allSettled()的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！