Explorando 承諾：.all 與 .allSettled / .race 與 .any

隨著 ECMAScript 6 (ES2015) JavaScript 規範的發布，2015 年出現了一些承諾，讓我們作為開發人員在處理非同步操作時的體驗變得更加簡單。

如果您學習或使用 JavaScript，您可能已經使用過 Promise.all() 或 Promise.race()。為了讓開發人員的生活更輕鬆，隨著最新版本 JavaScript 的發布，我們可以存取兩個新的 Promises 方法：Promise.allSettled() 和 Promise.any()（分別為 ES11 和 ES2021）。

但是它們之間有什麼區別以及我們什麼時候應該使用它們？

概括

Promise.all 與 Promise.allSettled：專注於結果
Promise.race 與 Promise.any：專注於速度

---

Promise.all 與 Promise.allSettled：專注於結果

想像一下，您正在開發一個應用程序，在某個時刻需要執行不同的 API 呼叫。如果這些調用彼此獨立，一個好的選擇是同時執行所有調用，除了使程式碼更加簡潔之外，還可以提高應用程式的效能。

Promise.all()

• 接收一個 Promise 陣列 作為參數；
• 同時（並行）執行操作；
• 當所有 Promise 成功解決時解決；
• 如果其中一個 Promise 失敗，則立即拒絕，並阻止後續 Promise 的執行。

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.all() 當您需要確保所有 Promise 都成功 並且函數在執行其他操作之前收到所需的所有結果時

非常有用。 >

Promise.allSettled()

• 也接收一個 Promise 陣列 作為參數；
• 也同時（並行）執行操作；
• 當所有 Promise 完成執行時解析，無論成功或失敗，為每個 Promise 傳回一個包含其狀態（已完成或拒絕）的物件；
• 從不拒絕，因此也不會阻止 Promise 的執行。

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.allSettled() 如果任何 Promise 以失敗結束，則不會阻止應用程序，此外允許單獨處理每個調用的成功或錯誤。它就像一個狀態報告，等待所有請求得到解決或拒絕，並允許使用者評估和處理每個案例。

回摘要

---

Promise.race 與 Promise.any：專注於速度

另一方面，當我們談論 Promise.race() 和 Promise.any() 時，我們討論的是處理一組非同步操作中的第一個回應的方法。

Promise.race()

• 贏得陣列腳本化的Promise；
• 同時（並行）執行操作；
• 傳回第一個已完成或被拒絕的 Promise。

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.race() 當我們需要快速回應時非常有用 - 第一個可用的返回，無論是成功還是錯誤。它也廣泛與超時一起使用，如上例，以確保我們在限定時間內有任何回應，並且可以防止緩慢的請求繼續消耗資源。

Promise.any()

• 您也可以取得一個腳本化 Promise 陣列；
• 同時（並行）執行操作；
• 返回第一個成功完成的Promise，忽略拒絕；
• 僅當所有 Promise 都被拒絕時才拒絕。

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.any() 當您需要至少一個請求成功完成時很有用，非常適合後備和冗餘，如何從多個來源（CDN、本地等）載入資源或在失敗時連接到不同的伺服器。

回摘要

---

在日益非同步的數位世界中，了解如何在 JavaScript 中管理多個同時操作已成為開發人員的基本技能。在本文中，我們透過一些範例探討了一些重要的 Promise 方法，展示了它們各自的工作原理，更重要的是，您何時以及為何應該選擇其中一種。

下次再見（我保證我很快就會回來）！

以上是Explorando 承諾：.all 與 .allSettled / .race 與 .any的詳細內容。更多資訊請關注PHP中文網其他相關文章！