關於 Promise 的 allSettled()

前言

  最近發現 Promise 還有個 allSettled() ，抽個空作個學習，在此做個紀錄。

內容

  先看範例

function promise(num, time = 50) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      (num>0) ? resolve(`value:${num}, 成功`) : reject(`value:${num},失敗`);
    }, time);
  });
}
Promise.allSettled([promise(0,5000), promise(2,500), promise(3, 1000)])
  .then(res => {
    console.log(res);
  })
  .catch(res =>{
    console.log(res);
  
  })
  .finally(() => {
    console.log(`It's done`);
    console.log(`finally block `);
  });
// [[object Object] {
//   reason: "value:0,失敗",
//   status: "rejected"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:2, 成功"
// }, [object Object] {
//   status: "fulfilled",
//   value: "value:3, 成功"
// }]
// "It's done"
// "finally block "

allSettled() 的功能與 all() 類似，都是同時啟動多個 Promise， 差別在於 all() 只會喚起 then() 或 catch() 一次 ，但 allSettled() 會讓每個 Promise 都跑 then() 或 catch()，而且要注意回傳的是一個物件，並不是 resolve() 或 reject() 的引數，但可以在物件的屬性中提取該值，並且注意 then() 與 catch() 回傳物件的屬性名稱是不一樣的， then() 的是"reason"，而 catch() 的是"value"，最後範例會用 finally() 來印出完成，這粒可以可看出 allSettled() 並不是每個 Promise 一完成就直接跑 then() 或 catch() ，而是等所有的 Promise 都跑完後才跑所有的 then() 或 catch() 。

參考資料

[ developer.mozilla.org ] Promise.allSettled()