JavaScript | Promise.allSettled + finally で部分成功・部分失敗を安全に処理するフロー図

では 「Promise.allSettled + finally」 を使った場合の処理フローを、
「部分成功・部分失敗を安全に処理する」観点で図解します。

前提シナリオ

3つの API を同時に呼び出す：

fetchUser()
fetchPosts()
fetchComments()

• 成功/失敗が混ざっても、すべての結果を取得
• 成功した分は利用、失敗した分は安全に代替処理
• 成否に関係なく finally で後処理（ローディング解除など）

① フロー図

showLoadingSpinner()
        │
        ▼
Promise.allSettled開始（並列実行）
        │
        ▼
 ┌─────────────────────────────┐
 │ 全てのPromiseがsettled（完了）                      │
 └─────────────────────────────┘
        │
        ▼
結果をチェック
  ┌───────────────┐
  │ status === "fulfilled"?  │
  └───────────────┘
    /        \
  Yes          No
  │            │
取得した値を   失敗したものは
保存・利用     nullや空配列で安全に処理
        │
        ▼
finallyブロック実行
 ┌───────────────┐
 │ 後処理（UI解除など）       │
 └───────────────┘
        │
        ▼
hideLoadingSpinner()

② コード例と対応付け

async function loadAllDataSafe() {
  showLoadingSpinner();

  try {
    const results = await Promise.allSettled([
      fetch("/api/user").then(r => r.json()),
      fetch("/api/posts").then(r => r.json()),
      fetch("/api/comments").then(r => r.json())
    ]);

    const user = results[0].status === "fulfilled" ? results[0].value : null;
    const posts = results[1].status === "fulfilled" ? results[1].value : [];
    const comments = results[2].status === "fulfilled" ? results[2].value : [];

    console.log("部分成功結果:", { user, posts, comments });

  } finally {
    hideLoadingSpinner(); // 成否に関係なく必ず後処理
    console.log("UIを確実に片付けました");
  }
}

loadAllDataSafe();

async function loadAllDataSafe() {
  showLoadingSpinner();

  try {
    const results = await Promise.allSettled([
      fetch("/api/user").then(r => r.json()),
      fetch("/api/posts").then(r => r.json()),
      fetch("/api/comments").then(r => r.json())
    ]);

    const user = results[0].status === "fulfilled" ? results[0].value : null;
    const posts = results[1].status === "fulfilled" ? results[1].value : [];
    const comments = results[2].status === "fulfilled" ? results[2].value : [];

    console.log("部分成功結果:", { user, posts, comments });

  } finally {
    hideLoadingSpinner(); // 成否に関係なく必ず後処理
    console.log("UIを確実に片付けました");
  }
}

loadAllDataSafe();

フロー対応

③ ポイント

1. Promise.allSettled は すべての Promise の完了を待つ
   • 成功・失敗の混在を安全に処理できる
2. 成功した分だけ利用し、失敗した分は安全なデフォルト値に置き換える
3. finally で後処理を行う → UIやリソースの片付けを必ず実行

💡 覚え方

• Promise.all → 全部成功しないと catch に飛ぶ
• Promise.allSettled → すべての結果を安全に受け取る
• finally → 成否に関係なく必ず実行（後処理専用）