1件失敗しても他の結果を使いたい｜allSettledを実験する

今回の仕上がり

独立した3つの処理のうち「説明」だけを失敗させました。Promise.allは失敗を返し、allSettledは得点の成功・説明の失敗・設定の成功を個別に返しました。説明を読めなくても得点や設定を表示したい場面の考え方です。

処理はブラウザ内のタイマーで模擬しています。実サービスに障害を発生させたり、本番へ人工リクエストを送ったりする例ではありません。

実験の手順

1. 下の作例で「allとallSettledを比較」を押します。
2. allがrejectedになっても、得点と設定の処理が完了することを見ます。
3. 完了順は説明→設定→得点、allSettledの一覧は入力順の得点→説明→設定になっていることを比べます。

const results = await Promise.allSettled(jobs);
for (const item of results) {
  if (item.status === 'fulfilled') {
    console.log(item.value);
  } else {
    console.log(item.reason);
  }
}

jobsは処理を表すPromiseの配列です。作例ZIPには90ms・10ms・40msのタイマーを使った定義も入っています。両方の方法に同じ3つのPromiseを渡しているので、比較のために処理を二重起動していません。

全部そろえるか、使える分を使うか

allは失敗を早く受け取れますが、他の処理を自動で中止しません。allSettledは全処理が決着するまで待つため、終わらない処理があると結果もそろいません。注文のように全部の成功が必要な処理へ、部分成功をそのまま当てはめないでください。

HTTP 404でもfetch自体は成功扱いになるため、必要なら各処理内でresponse.okを確かめて失敗を投げます。この実験の「失敗」はPromiseのrejectです。参照：MDN Promise.allSettled()。HTTPエラーの判定例もあります。

操作できる作例

作例を別画面で開く · 作例ZIPを保存