Explorando の約束: .all vs .allSettled / .race vs .any

2015 年に ECMAScript 6 (ES2015) JavaScript 仕様がリリースされ、非同期操作を扱う際の開発者エクスペリエンスの複雑さを軽減するという約束が生まれました。

JavaScript を学習したり、JavaScript を使用したりしている場合は、おそらくすでに Promise.all() または Promise.race() を使用したことがあるでしょう。また、開発者の作業をさらに容易にするために、最新バージョンの JavaScript のリリースにより、Promise.allSettled() と Promise.any() (それぞれ ES11 と ES2021) という 2 つの新しい Promises メソッドにアクセスできるようになりました。

しかし、それらの違いは何でしょうか?また、それぞれをいつ使用する必要がありますか?

まとめ

Promise.all vs Promise.allSettled: 結果に注目
Promise.race vs Promise.any: スピード重視

---

Promise.all vs Promise.allSettled: 結果に焦点を当てる

ある時点でさまざまな API 呼び出しを実行する必要があるアプリケーションを開発していると想像してください。これらの呼び出しが互いに独立している場合、 すべての呼び出しを同時に実行し、 コードをより簡潔にするだけでなく、アプリケーションのパフォーマンスを向上させることも良い選択肢となります。

Promise.all()

• Promise の 配列 を引数として受け取ります;
• 操作を同時に (並列的に) 実行します。
• すべての Promise が正常に解決された場合に解決します。
• Promise の 1 つが失敗した場合は直ちに拒否され、後続の 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 のステータス (履行または拒否) を含むオブジェクトが返されます。
決して拒否せず、その結果、約束の実行をブロックしません。

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() は、少なくとも 1 つのリクエストを正常に完了する必要がある場合に役立ちます。フォールバックや冗長化に最適です。複数のソース (CDN、ローカルなど) からリソースをロードするか、障害が発生した場合に別のサーバーに接続します。

概要に戻る

---

非同期化が進むデジタル世界では、JavaScript で複数の同時操作を管理する方法を理解することが開発者にとって不可欠なスキルとなっています。この記事では、いくつかの例を示しながら重要な Promise メソッドを検討し、それぞれがどのように機能するか、そしてさらに重要なことに、どちらかを選択する必要がある場合とその理由を示します。

また会いましょう (そして 約束しますすぐに戻ってきます)!

以上がExplorando の約束: .all vs .allSettled / .race vs .anyの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。