ここでは 複数の非同期処理のうち、一部が失敗しても処理を止めず、成功した分だけ使うパターン を解説します。
ポイントは Promise.allSettled + finally を使うことです。
シナリオ
3つの API を並列で呼び出す：
/api/user/api/posts/api/comments
どれか失敗しても、成功した分だけ利用したい。
さらに、通信終了後には必ずローディングを消したい。
サンプルコード
async function loadDataPartial() {
showLoadingSpinner(); // ローディング表示
try {
const results = await Promise.allSettled([
fetch("/api/user").then(res => res.json()),
fetch("/api/posts").then(res => res.json()),
fetch("/api/comments").then(res => res.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 : [];
// 部分失敗したものはログに出す
results.forEach((result, index) => {
if (result.status === "rejected") {
console.warn(`API ${index} が失敗しました:`, result.reason.message || result.reason);
}
});
console.log("取得データ:", { user, posts, comments });
} finally {
hideLoadingSpinner(); // 成否に関係なく必ず実行
console.log("ローディング終了");
}
}
loadDataPartial();
実行の流れ
- ローディング表示 ON
Promise.allSettledで 3つの API を並列実行- 結果ごとに
fulfilled/rejectedを確認 rejectedの場合は ログだけ出す- 成功した分だけオブジェクトに格納
- finally で必ずローディングを消す
ポイント
Promise.allだと 1つでも失敗したら全体が止まる → 部分成功できないPromise.allSettledを使うと 成功も失敗も結果として取得可能- finally は 必ず実行される後処理 に使う
- 部分失敗した場合は throw せずログに留める ことで、UI を止めない
応用例：成功したデータだけを画面表示
if (user) displayUser(user);
if (posts.length > 0) displayPosts(posts);
if (comments.length > 0) displayComments(comments);
成功した API だけ画面に反映することで、部分失敗でもアプリが動作するようになる
