了解 Angular 攔截器：超越 HTTP

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。

現在，打開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])
    ),
  ],
};

角度攔截器的高階用例

請求和回應的自訂轉換

攔截器可以為請求和回應自訂資料轉換，例如在應用程式處理請求正文、標頭或回應資料格式之前修改它們。

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 攔截器透過實作錯誤處理策略來增強應用程序，例如自動重試失敗的請求和轉換錯誤回應以改善使用者體驗。

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 就是這樣一個強大的工具，可以增強您的開發工作流程。例如，假設您正在開發一個應用程序，需要測試它如何處理緩慢的網路回應。

• 安裝和設定：輕鬆安裝Requestly作為瀏覽器擴展，並設定規則來攔截和修改HTTP請求和回應。
• 規則管理：根據 URL、標頭或查詢參數定義和管理規則集，以根據特定條件攔截請求。
• 請求修改：透過新增標頭、重寫URL或根據預定義規則重定向請求來修改請求，方便動態測試和偵錯場景。
• 進階用例：利用 Requestly 模擬不同的伺服器回應、模擬端點以進行測試，或在開發過程中強制執行特定的網路條件。

結論

Angular 攔截器是管理 HTTP 通訊和增強 Angular 應用程式健全性不可或缺的工具。透過掌握這些方法並探索 Requestly 等外部解決方案，開發人員可以有效地簡化 API 整合、改善安全實踐並優化效能。採用攔截器來提高 Angular 應用程式的可靠性和可擴展性，以自信和高效地處理各種後端互動。

以上是了解 Angular 攔截器：超越 HTTP的詳細內容。更多資訊請關注PHP中文網其他相關文章！