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

JavaScript

2024.11.242025.11.09

では「Promise.allSettled + finally のタイムライン形式フロー図」を作って、
各 Promise がいつ完了して、finally がどう動くかを視覚化します。

タイムライン形式フロー図

タイムライン形式フロー図

シナリオ

3つの API を同時に呼ぶ：

fetchUser() → 成功
fetchPosts() → 失敗
fetchComments() → 成功

Promise.allSettled + finally で安全に処理する

Time →
┌────────────────────────────────────────┐
| showLoadingSpinner()  │ ← ローディング表示ON                           |
└────────────────────────────────────────┘
        │
        ▼
┌────────────────────────────────────────┐
| Promise.allSettled開始（並列で実行）                                     |
| fetchUser, fetchPosts, fetchComments                                   |
└────────────────────────────────────────┘
        │
        ▼
  ┌───────┐     ┌────────┐     ┌─────────┐
  | fetchUser    |     | fetchPosts    |      | fetchComments   |
  | 成功         |      | 失敗          |      | 成功            |
  └───────┘     └────────┘     └─────────┘
        │                  │                     │
        ▼                  ▼                     ▼
  結果取得→fulfilled   結果取得→rejected   結果取得→fulfilled
        │                  │                     │
        └───────結果配列にまとめ────────┘
                       (results)
        │
        ▼
 ┌─────────────────────────────┐
 | 結果チェック・部分成功処理                            |
 | user → results[0].value                           |
 | posts → null (failed)                             |
 | comments → results[2].value                       |
 └─────────────────────────────┘
        │
        ▼
 ┌─────────────────────────────┐
 | finally ブロック実行                                 |
 | 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後処理完了");
  }
}

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後処理完了");
  }
}