快捷導(dǎo)航

JS中Promise.all 與 Promise.race的區(qū)別小結(jié)

更新時(shí)間：2026年02月24日 09:49:36 作者：發(fā)現(xiàn)一只大呆瓜

本文主要介紹了JS中Promise.all 與 Promise.race的區(qū)別小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在處理并發(fā)請(qǐng)求時(shí)，Promise.all 和 Promise.race 是我們的得力助手。理解它們的底層實(shí)現(xiàn)，不僅能幫我們應(yīng)對(duì)面試，更能讓我們?cè)趶?fù)雜的異步場(chǎng)景中游刃有余。本文將帶你從原理出發(fā)，手寫(xiě)這兩個(gè)核心方法的 TypeScript 版本。

一、手寫(xiě) Promise.all

1. 核心作用與邏輯

Promise.all 接收一個(gè) Promise 數(shù)組，并返回一個(gè)全新的 Promise。

成功條件：只有當(dāng)所有子 Promise 都變?yōu)?fulfilled 時(shí)，它才返回所有結(jié)果組成的數(shù)組。
失敗條件：只要有一個(gè)子 Promise 變?yōu)?rejected，它就立即返回該失敗原因。

2. 核心思路

參數(shù)處理：需要將輸入?yún)?shù)轉(zhuǎn)為真正的數(shù)組，并處理非 Promise 類(lèi)型的數(shù)組成員。
順序保證：關(guān)鍵！ 由于異步執(zhí)行時(shí)間不同，直接 push 結(jié)果會(huì)導(dǎo)致順序錯(cuò)亂。必須通過(guò)索引 i 來(lái)精確存放結(jié)果。
計(jì)數(shù)器：判斷 result.length是否等于數(shù)組長(zhǎng)度，從而確定所有結(jié)果是否已返回。

3. 實(shí)現(xiàn)

  function PromiseAll(arr) {
    const promises = Array.from(arr);
    const result = [];
    return new Promise((resolve, rejected) => {
      for (let i = 0; i < promises.length; i++) {
        promises[i]
          .then((res) => {
            result[i] = res;
            if (result.length === promises.length) {
              resolve(result);
            }
          })
          .catch((err) => {
            rejected(err);
          });
      }
    });
  }
  const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1000);
    }, 1000);
  });
  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(200);
    }, 200);
  });
  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(300);
    }, 300);
  });

  PromiseAll([promise1, promise2, promise3])
    .then(function (values) {
      console.log('全部成功', values);
    })
    .catch((values) => {
      console.log('有一個(gè)失敗', values);
    });

二、手寫(xiě) Promise.race

1. 核心作用與邏輯

Promise.race 接收一個(gè) Promise 數(shù)組，其狀態(tài)取決于第一個(gè)改變狀態(tài)（無(wú)論成功還是失?。┑膶?shí)例。

2. 核心思路

搶跑機(jī)制：遍歷數(shù)組中的每一個(gè) Promise，誰(shuí)先觸發(fā)回調(diào)，就用誰(shuí)的結(jié)果來(lái)決議返回的 Promise。
狀態(tài)鎖定：一旦狀態(tài)改變，后續(xù)的 resolve 或 reject 都會(huì)被忽略（Promise 原生機(jī)制保證了這一點(diǎn)）。

3. 實(shí)現(xiàn)

  function PromiseRace(arr) {
    const promises = Array.from(arr);
    return new Promise((resolve, reject) => {
      try {
        for (let i = 0; i < promises.length; i++) {
          Promise.resolve(promises[i]).then(
            // 第一個(gè)成功的結(jié)果，直接resolve新Promise
            (value) => resolve(value),
            // 第一個(gè)失敗的原因，直接reject新Promise
            (reason) => reject(reason)
          );
        }
      } catch (error) {
        // 參數(shù)校驗(yàn)/遍歷出錯(cuò)時(shí)，直接reject新Promise
        reject(error);
      }
    });
  }
  const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(100);
    }, 100);
  });
  const p2 = new Promise((resolve) => {
    setTimeout(() => {
      resolve(500);
    }, 5000);
  });
  const p3 = new Promise((resolve) => {
    setTimeout(() => {
      resolve(1000);
    }, 1000);
  });
  PromiseRace([p1, p2, p3])
    .then((res) => console.log(`第一個(gè)成功狀態(tài)：${res}`, 'success'))
    .catch((err) => console.log(`第一個(gè)失敗狀態(tài)：${err}`, 'error'));

三、總結(jié)與對(duì)比

方法	核心關(guān)注點(diǎn)	核心難點(diǎn)
Promise.all	全員完成且順序一致	需使用索引賦值而非 push
Promise.race	誰(shuí)快聽(tīng)誰(shuí)的 (Winner-takes-all)	處理空數(shù)組及非 Promise 對(duì)象

到此這篇關(guān)于JS中Promise.all 與 Promise.race的區(qū)別小結(jié)的文章就介紹到這了,更多相關(guān)JS Promise.all Promise.race內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: