Angular インターセプターを理解する : HTTP を超えて-jsチュートリアル-php.cn

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);
}

ログイン後にコピー

Understanding Angular Interceptors : Beyond HTTP

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

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);
    })
  );
};

ログイン後にコピー

Understanding Angular Interceptors : Beyond HTTP
ここでは、インターセプターはエラーを処理する前に、失敗したリクエストを最大 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);
};

ログイン後にコピー

Understanding Angular Interceptors : Beyond HTTP

外部ツールを使用した傍受

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

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

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

結論

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

以上がAngular インターセプターを理解する : HTTP を超えての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。