點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Promise.allSettled() 只取得 Fulfilled Promise

Sam Xiao's Avatar 2020-04-05

Promise.all() 處理 Promise Array 時,必須所有的 Promise 為 Fulfilled 才行,只要有一個 Promise 為 Rejected 就會失敗,若想有幾個 Fulfilled 就顯示幾個,而放棄 Rejected,就得使用 Promise.allSettled()

Version

macOS Catalina 10.15.4
WebStorm 2019.3.4
Node 12.4.0
ECMAScript 2020

Promise.all()

let data = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
]

Promise.all(data)
  .then(console.log)
  .catch(console.log)

第 1 行

let data = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
]

Promise array 中並非所有 promise 都 resolve,其中 data[1] 為 rejected promise。

第 7 行

Promise.all(data)
  .then(log)
  .catch(log)

若使用 Promise.all() 只會得到 rejected promise。

allsettled000

Promise.allSettled()

let data = [
  Promise.resolve(1),
  Promise.reject(2),
  Promise.resolve(3)
]

Promise.allSettled(data)
  .then(x => x.filter(x => x.status === 'fulfilled'))
  .then(x => x.map(x => x.value))
  .then(console.log)
  .catch(console.log)

無論是 fulfilled 或 rejected,凡不是 pending 都統稱為 settled,若我們想得到所有 fulfilled promise,可使用 filter()fulfilled status 濾出,再使用 map() 取出 value property。

allsettled001

Conclusion

  • Promise.allSettled() 定義在 ECMAScript 2020,為較新的 function,目前在 Quokka 還無法使用,但在 Node + Babel 與 Vue + Babel 可正常運作

Reference

MDN, Promise.allSettled()