這篇文章主要介紹了javascript中Promise.allSettled()怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的網(wǎng)站制作、做網(wǎng)站質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠為行業(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式營銷型網(wǎng)站建設(shè)需求，讓再小的高端網(wǎng)站設(shè)計也能產(chǎn)生價值！

Promise.allSettled() 方法返回一個在所有給定的 promise 都已經(jīng) fulfilled 或 rejected 后的 promise，并帶有一個對象數(shù)組，每個對象表示對應(yīng)的 promise 結(jié)果。

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

1. Promise.allSettled()

Promise.allSettled() 可用于并行執(zhí)行獨立的異步操作，并收集這些操作的結(jié)果。

該函數(shù)接受一個 promise 數(shù)組(通常是一個可迭代對象)作為參數(shù):

const statusesPromise = Promise.allSettled(promises);

當(dāng)所有的輸入 promises 都被 fulfilled 或 rejected 時，statusesPromise 會解析為一個具有它們狀態(tài)的數(shù)組

• { status: 'fulfilled', value: value } — 如果對應(yīng)的 promise 已經(jīng) fulfilled

• 或者 {status: 'rejected'， reason: reason} 如果相應(yīng)的 promise 已經(jīng)被 rejected

在解析所有 promises 之后，可以使用 then 語法提取它們的狀態(tài):

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

或者使用 async/await 語法：

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

2. 取水果和蔬菜

在深入研究 Promise.allSettle() 之前，我們先定義兩個簡單的 helper 函數(shù)。

首先，resolveTimeout(value, delay)返回一個 promise ，該 promise 在經(jīng)過 delay 時間后用 value 來實現(xiàn)

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

第二，rejectTimeout(reason, delay) - 返回一個 promise，在經(jīng)過 delay 時間后拒絕reason。

最后，我們使用這些輔助函數(shù)來試驗 promise.allsettle()。

2.1 All promises fulfilled

我們同時訪問當(dāng)?shù)仉s貨店的蔬菜和水果。訪問每個列表是一個異步操作:

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秒內(nèi)解決，就在蔬菜和水果被解決之后，并行地解決。

statusesPromise 解析為一個包含狀態(tài)的數(shù)組。

• 數(shù)組的第一項包含有蔬菜的已完成狀態(tài):status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

• 同樣的方式，第二項是水果的完成狀態(tài): { status: 'fulfilled', value: ['oranges', 'apples'] }

2.2一個 promise 被拒絕

想象一下，在雜貨店里已經(jīng)沒有水果了。在這種情況下，我們拒絕水果的 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 秒后解析為一個狀態(tài)數(shù)組:

• 數(shù)組的第一項，蔬菜 promise 成功解析：{ status: 'fulfilled', value: ['potatoes', 'tomatoes'] }

• 第二項，因為水果 promise  被拒絕，所以是一個拒絕狀態(tài): { status: 'rejected', reason: Error('Out of fruits') }

即使輸入數(shù)組中的第二個 promise  被拒絕，statusesPromise仍然會成功解析一個狀態(tài)數(shù)組。

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仍然成功地解析為一個狀態(tài)數(shù)組。然而，該數(shù)組包含被拒絕的promise 的狀態(tài)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“javascript中Promise.allSettled()怎么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)頁題目：javascript中Promise.allSettled()怎么用
文章起源：http://jinyejixie.com/article36/jjpspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、云服務(wù)器、小程序開發(fā)、品牌網(wǎng)站設(shè)計、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)