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

    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 物件的狀態以及相應的值或拒絕原因。