Promise.race() 是什麼？如何實踐 Promise.race()？

什麼是 Promise.race()？

Promise.race(iterable) 接受一個可迭代的 Promise 陣列，並回傳一個新的 Promise，該 Promise 的狀態由第一個完成（settled）的 Promise 決定——不管是 fulfilled 還是 rejected。

基本用法

const p1 = new Promise(resolve => setTimeout(() => resolve('p1'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('p2'), 500));
const p3 = new Promise((_, reject) => setTimeout(() => reject('p3 error'), 300));

Promise.race([p1, p2, p3])
  .then(result => console.log(result))  // 不會執行
  .catch(err => console.error(err));    // 'p3 error'（p3 最快，且 rejected）

實際應用：超時機制（Timeout）

這是 Promise.race() 最常見的用途：

function timeout(ms) {
  return new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), ms)
  );
}

function fetchWithTimeout(url, ms) {
  return Promise.race([
    fetch(url),
    timeout(ms)
  ]);
}

fetchWithTimeout('/api/data', 3000)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err.message)); // 若超時：'Request timed out'

自行實現 Promise.race()

function myPromiseRace(promises) {
  return new Promise((resolve, reject) => {
    for (const promise of promises) {
      Promise.resolve(promise).then(resolve, reject);
    }
  });
}

注意事項

• Promise.race() 只關心第一個完成的，其餘 Promise 仍會繼續執行，只是結果被忽略
• 若傳入空陣列，回傳的 Promise 將永遠 pending
• 與 Promise.any() 的差別：race 不論成敗，any 只等第一個成功的