在JavaScript中Promise的四種方法：Promise.race、Promise.any、Promise.all、Promise.allSettled

    AllenLi
    Coding

    關於Promise的四種方法，簡單整理如下:

    - Promise.race：依第一個完成的 Promise 物件的狀態來回傳結果(resolve/reject)。
- Promise.any：當 Promise 物件被解決時才 resolve，當所有的 Promise 物件都被拒絕時，才回傳 reject。
- Promise.all：只有在所有的 Promise 物件都解決時才 resolve，否則被 reject。
- Promise.allSettled：在所有的 Promise 物件都完成後才 resolve，並回傳一個包含所有結果的陣列。

四個方法皆會回傳一個新的 Promise 物件。

    Promise.race()

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Promise 2 rejected'), 500);
});

const racePromise = Promise.race([promise1, promise2]);

racePromise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error); // 回傳 'Promise 2 rejected' at t=500ms
  });

    Promise.any()

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Promise 1 rejected'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 2 resolved'), 500);
});

const anyPromise = Promise.any([promise1, promise2]);

anyPromise
  .then(result => {
    console.log(result); // 回傳 'Promise 2 resolved' at t=500ms
  })
  .catch(errors => {
    console.log(errors); // 在所有 Promise 都被拒絕時才會執行這裡
  });

    Promise.all()

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 2 resolved'), 500);
});

const allPromise = Promise.all([promise1, promise2]);

allPromise
  .then(results => {
    console.log(results); // 結果將是一個包含兩個 Promise 的解決結果的陣列 ['Promise 1 resolved', 'Promise 2 resolved']
  })
  .catch(error => {
    console.log(error); // 在任何一個 Promise 被拒絕時才會執行這裡
  });

    Promise.allSettled()

    const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Promise 1 resolved'), 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Promise 2 rejected'), 500);
});

const allSettledPromise = Promise.allSettled([promise1, promise2]);

allSettledPromise
  .then(results => {
    console.log(results);
    /* 結果將是一個包含兩個 Promise 的結果的陣列：
    [
      { status: 'fulfilled', value: 'Promise 1 resolved' },
      { status: 'rejected', reason: 'Promise 2 rejected' }
    ]
    */
  });

    對於每個 Promise 物件的結果，物件都包含兩個屬性：

    status：表示 Promise 物件的狀態有 "fulfilled"（解決）和 "rejected"（被拒絕），或是 "pending"(運行中，尚未取得結果)。
- value（只在 status 為 "fulfilled" 時出現）：表示 Promise 解決resolved時的返回值。
- reason（只在 status 為 "rejected" 時出現）：表示 Promise 被拒絕rejected時的拒絕原因。
這樣的格式便於檢查每個 Promise 物件的狀態以及相應的值或拒絕原因。

    Related Posts