Angular インターセプターは、開発者がアプリケーションで HTTP リクエストと応答を処理する方法を管理するために使用できる非常に強力なツールです。これらは、ロギング、認証、エラー処理などの機能を実装する際に重要な役割を果たし、コードがより明確で保守しやすくなります。

Angular インターセプターは、Angular アプリケーションとサーバーの間のミドルウェアのように機能します。これらは、リクエストがサーバーに送信される前にインターセプトし、レスポンスがアプリケーション コンポーネントに到達する前にインターセプトします。これにより、開発者はヘッダーの追加、リクエスト/レスポンス本文の変更、ステータス コードの変更によってリクエストを変更できるようになります。

Angular プロジェクトのセットアップ

まず、Angular CLI がインストールされていることを確認してください。そうでない場合は、npm:
を使用してインストールできます。

npm install -g @angular/cli

次に、新しい Angular プロジェクトを作成します:

ng new Project_Name
cd Project_Name

次に、Angular CLI を使用して新しい HTTP インターセプターを生成します:

ng generate interceptor interceptors/interceptorName

これにより、src/app/interceptors ディレクトリに interceptorName.interceptor.ts と interceptorName.interceptor.spec.ts という 2 つのファイルが作成されます。

次に、interceptorName.interceptor.ts を開いて、インターセプターのロジックを追加します。メッセージをログに記録する例を次に示します。

import { HttpInterceptorFn } from '@angular/common/http';

export const interceptorName: HttpInterceptorFn = (req, next) => {
  console.log('HTTP Request:', req);
  return next(req);
};

次に、インターセプターを使用するには、app.config.ts を開いてプロバイダー配列に追加します。

...
import { provideHttpClient,withInterceptors } from '@angular/common/http';
import { interceptorName } from './interceptors/interceptorName.interceptor';


export const appConfig: ApplicationConfig = {
  providers: [
    ....
    provideHttpClient(
      withInterceptors([interceptorName])
    ),
  ],
};

Angular インターセプターの高度な使用例

リクエストとレスポンスのカスタム変換

インターセプターは、アプリケーションによって処理される前にリクエスト本文、ヘッダー、または応答データ形式を変更するなど、リクエストと応答のデータ変換を調整できます。

import { HttpInterceptorFn, HttpResponse } from '@angular/common/http';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    body: { title:"Modified Request Body",id: 1 },
  });
  return next(modifiedReq);
};

テストシナリオ用のモック

開発者は、テスト中にインターセプターを使用して HTTP 応答を模擬することで、ライブ バックエンド サービスに依存せずに、さまざまなサーバー状況をシミュレートできます。この方法により、さまざまなシナリオを適切に評価することが可能になります。

import { HttpInterceptorFn } from '@angular/common/http';
import { of } from 'rxjs';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
    // Mock response for testing
    if (req.url.endsWith('/test')) {
    const mockResponse = { id: 1, title: 'Test Data' };
    return of(new HttpResponse({ status: 200, body: mockResponse }));
  }
    // Pass through to actual HTTP request
    return next(req);
}

エラー処理と再試行のメカニズム

Angular Interceptor は、失敗したリクエストを自動的に再試行したり、ユーザー エクスペリエンスを向上させるためにエラー応答を変換したりするなど、エラー処理戦略を実装することでアプリケーションを強化します。

import { HttpInterceptorFn } from '@angular/common/http';
import { catchError,retry, throwError } from 'rxjs';

export const apiInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3), // Retry failed requests up to 3 times
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

ここでは、インターセプターはエラーを処理する前に、失敗したリクエストを最大 3 回再試行し、リクエストを正常に完了するために複数回試行することを保証します。

インターセプターの連鎖と実行順序の制御

Angular では、開発者は複数のインターセプターをリンクし、それぞれが認証、ロギング、エラー処理などのリクエスト処理のさまざまな側面を管理できます。これらは登録された順序で実行されるため、リクエストとレスポンスを正確に変更でき、アプリケーション機能を強化するためのワークフローの柔軟な管理が保証されます。

import { HttpInterceptorFn, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

// First Interceptor: Authentication
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const authReq = req.clone({
    setHeaders: {
      Authorization: `Bearer YOUR_TOKEN`
    }
  });
  return next(authReq);
};

// Second Interceptor: Logging
export const loggingInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request URL:', req.url);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log('Response Status:', event.status);
      }
    })
  );
};

// Third Interceptor: Error Handling
export const errorHandlingInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req).pipe(
    retry(3),
    catchError((error) => {
      console.error('HTTP Error:', error);
      return throwError(error);
    })
  );
};

// Registering Interceptors in Angular Module

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    provideHttpClient(
      withInterceptors([apiInterceptor,loggingInterceptor,errorHandlingInterceptor])
    ),
  ],
};

イベント処理と DOM インタラクション

Angular インターセプターには、Angular が処理する前に DOM イベントとインタラクションをインターセプトする機能があります。この機能により、ユーザー インタラクションのログ記録、アプリケーション全体のイベント処理ポリシーの適用、アプリケーション内でのイベント伝播前の追加の検証の実施などのタスクが可能になります。

import { HttpInterceptorFn } from '@angular/common/http';

export const eventLoggingInterceptor: HttpInterceptorFn = (req, next) => {
  document.addEventListener('click', (event) => {
    console.log('Click event intercepted:', event);
    // Additional custom event handling logic
  });
  return next(req);
};

外部ツールを使用したインターセプト

外部 HTTP インターセプト ツールは、さまざまなシナリオで非常に役立ちます。特に、組み込みインターセプターで利用できるものを超えて HTTP リクエストと応答をより詳細に制御する必要がある場合に便利です。これらは、API のテストとデバッグ、さまざまなサーバー条件のシミュレーション、およびアプリケーションがさまざまなエッジ ケースを効果的に処理できるようにする場合に特に役立ちます。

Requestly は、開発ワークフローを強化する強力なツールの 1 つです。たとえば、アプリケーションを開発していて、遅いネットワーク応答をどのように処理するかをテストする必要があるとします。

• インストールと構成: Requestly をブラウザ拡張機能として簡単にインストールし、HTTP リクエストと応答を傍受して変更するルールを設定します。
• ルール管理: URL、ヘッダー、またはクエリ パラメータに基づいてルールセットを定義および管理し、特定の基準に従ってリクエストをインターセプトします。
• リクエストの変更: 事前定義されたルールに基づいて、ヘッダーの追加、URL の書き換え、またはリクエストのリダイレクトによってリクエストを変更し、動的テストとデバッグ シナリオを容易にします。
• 高度な使用例: Requestly を利用して、さまざまなサーバー応答をシミュレートしたり、テスト目的でエンドポイントを模擬したり、開発中に特定のネットワーク条件を強制したりできます。

結論

Angular インターセプターは、HTTP 通信を管理し、Angular アプリケーションの堅牢性を強化するために不可欠なツールです。メソッドをマスターし、Requestly などの外部ソリューションを検討することで、開発者は API 統合を合理化し、セキュリティ慣行を改善し、パフォーマンスを効果的に最適化できます。インターセプターを利用して、Angular アプリケーションの信頼性とスケーラビリティを高め、多様なバックエンド インタラクションを確実かつ効率的に処理します。