Angular Academy · レッスン

リトライとローディングインジケーター

Q: 「リトライとローディングインジケーター」で何を学びますか？

リトライとグローバルスピナーを実装します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

リトライとグローバルスピナーを実装します

「リトライとローディングインジケーター」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

2つの横断的関心事

interceptorは、アプリ全体に関わる2つの動作に最適です。失敗したリクエストの自動リトライと、リクエストの実行中にグローバルなローディング状態を追跡することです。

retryで再試行する

next(req)の後にretryをパイプして、一時的な失敗を再試行します。

import { retry } from 'rxjs';

export const retryInterceptor: HttpInterceptorFn = (req, next) =>
  next(req).pipe(retry(2));

安全なリクエストだけを再試行する

冪等なメソッド（GET、HEAD）は自由に再試行できますが、POSTやPUTの再試行には注意してください。重複が発生する可能性があります。メソッドで制限します。

export const retryInterceptor: HttpInterceptorFn = (req, next) => {
  if (req.method !== 'GET') return next(req);
  return next(req).pipe(retry(2));
};

遅延とバックオフを使って再試行する

リトライでサーバーに負荷をかけ続けないよう遅延を追加し、回復性を高めるために指数バックオフを使います。

import { timer } from 'rxjs';

next(req).pipe(
  retry({
    count: 3,
    delay: (_err, n) => timer(Math.pow(2, n) * 500)
  })
);

条件付きで再試行する

再試行可能なエラー（5xxやネットワークエラー）の場合だけ再試行し、再び失敗する4xxのクライアントエラーでは再試行しません。

retry({
  count: 2,
  delay: (err, n) =>
    err.status >= 500 ? timer(n * 500) : throwError(() => err)
})

グローバルなローディング状態

loadingサービスで実行中のリクエスト数を追跡し、UIにグローバルなスピナーを表示できるようにします。

export class LoadingService {
  private active = signal(0);
  readonly isLoading = computed(() => this.active() > 0);
  start() { this.active.update(n => n + 1); }
  stop()  { this.active.update(n => Math.max(0, n - 1)); }
}

ローディングinterceptor

リクエスト開始時にカウントを増やし、finalizeを使って完了時（成功またはエラー）に減らします。

import { finalize } from 'rxjs';

export const loadingInterceptor: HttpInterceptorFn = (req, next) => {
  const loading = inject(LoadingService);
  loading.start();
  return next(req).pipe(finalize(() => loading.stop()));
};

finalizeを使う理由

finalizeは、完了、エラー、または購読解除のいずれの場合にも実行されます。そのためローディングカウンターが必ず減り、リクエストが失敗またはキャンセルされてもスピナーが表示されたままになることはありません。

スピナーの表示

ルートテンプレートでローディングシグナルをバインドします。

// root component template:
// @if (loading.isLoading()) {
//   <app-spinner />
// }

バックグラウンドリクエストを除外する

ポーリングやプリフェッチのリクエストによってスピナーを表示したくない場合があります。カスタムヘッダーまたはコンテキストトークンを使用して、それらをスキップします。

import { HttpContextToken } from '@angular/common/http';
export const SKIP_LOADING = new HttpContextToken(() => false);
// in interceptor: if (req.context.get(SKIP_LOADING)) return next(req);

リトライとローディングを組み合わせる

リトライが1つのローディング期間内で行われるように順序を設定します。ローディングを開始し、内部でリトライを行い、最後に1回だけ完了処理を実行します。ローディングを最も外側に配置して、すべてのリトライ試行を対象にします。

理解度チェック

リトライとローディングインジケーターについての理解度を確認します。

まとめ：リトライとローディングインジケーター

インターセプターを使うと、リトライとグローバルなローディング状態をきれいに処理できます。

retryに遅延やバックオフを設定します。冪等な処理、またはリトライ可能なケースに限定してください。
サービスでアクティブなリクエストを追跡し、finalizeで数を減らします。
コンテキストトークンを使って、バックグラウンドリクエストをスキップします。

HttpClient Interceptorsを完了しました。

よくある質問

「リトライとローディングインジケーター」レッスンは無料ですか？

はい。「リトライとローディングインジケーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「リトライとローディングインジケーター」で何を学びますか？

リトライとグローバルスピナーを実装しますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「リトライとローディングインジケーター」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る