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