Angular怎么對請求進行攔截封裝

Angular怎么對請求進行攔截封裝

在現代的前端開發中，與后端進行數據交互是不可避免的。Angular 提供了強大的 HTTP 客戶端模塊 HttpClient，使得我們能夠輕松地發送 HTTP 請求。然而，在實際開發中，我們通常需要對請求進行一些統一的處理，例如添加認證信息、處理錯誤、添加日志等。為了簡化這些操作，Angular 提供了 HTTP 攔截器（Interceptor）機制，允許我們在請求發送和響應接收時進行攔截和處理。

本文將詳細介紹如何在 Angular 中對請求進行攔截封裝，包括攔截器的基本概念、如何創建和使用攔截器、以及一些常見的應用場景。

1. 什么是 HTTP 攔截器？

HTTP 攔截器是 Angular 提供的一種機制，允許我們在 HTTP 請求發送到服務器之前和響應返回到應用程序之前對其進行攔截和處理。攔截器可以用于多種場景，例如：

• 添加請求頭（如認證信息）
• 統一處理錯誤
• 添加日志
• 緩存請求
• 轉換請求或響應數據

攔截器本質上是一個實現了 HttpInterceptor 接口的類，該接口定義了一個 intercept 方法，用于攔截和處理 HTTP 請求。

2. 創建 HTTP 攔截器

要創建一個 HTTP 攔截器，我們需要實現 HttpInterceptor 接口，并實現其中的 intercept 方法。下面是一個簡單的攔截器示例：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 在這里對請求進行處理
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer your-auth-token')
    });

    // 繼續處理請求
    return next.handle(authReq);
  }
}

在這個示例中，我們創建了一個名為 AuthInterceptor 的攔截器，它在每個請求的頭部添加了一個 Authorization 字段，用于傳遞認證信息。

2.1 攔截器的核心方法 intercept

intercept 方法是攔截器的核心方法，它接收兩個參數：

• req: HttpRequest<any>：當前的 HTTP 請求對象。
• next: HttpHandler：用于將請求傳遞給下一個攔截器或最終的 HTTP 處理器。

在 intercept 方法中，我們可以對請求進行修改，例如添加請求頭、修改請求體等。修改后的請求可以通過 req.clone() 方法創建一個新的請求對象。

最后，我們需要調用 next.handle(authReq) 將修改后的請求傳遞給下一個攔截器或最終的 HTTP 處理器。

2.2 注冊攔截器

創建攔截器后，我們需要將其注冊到 Angular 的 HTTP 攔截器鏈中。這可以通過在 AppModule 中提供攔截器來實現：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule {}

在上面的代碼中，我們通過 HTTP_INTERCEPTORS 令牌將 AuthInterceptor 注冊為 HTTP 攔截器。multi: true 表示我們可以注冊多個攔截器，它們將按照注冊的順序依次執行。

3. 常見的攔截器應用場景

3.1 添加認證信息

在許多應用中，我們需要在每個請求中添加認證信息，例如 JWT（JSON Web Token）。通過攔截器，我們可以輕松地在每個請求的頭部添加 Authorization 字段：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = localStorage.getItem('auth_token');
    if (authToken) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${authToken}`)
      });
      return next.handle(authReq);
    }
    return next.handle(req);
  }
}

在這個示例中，我們從本地存儲中獲取認證令牌，并將其添加到請求頭中。

3.2 統一處理錯誤

在 HTTP 請求過程中，可能會發生各種錯誤，例如網絡錯誤、服務器錯誤等。通過攔截器，我們可以統一處理這些錯誤，例如顯示錯誤提示、記錄日志等：

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 處理未授權錯誤
          console.error('Unauthorized request:', error);
        } else if (error.status === 500) {
          // 處理服務器錯誤
          console.error('Server error:', error);
        }
        // 繼續拋出錯誤，以便在組件中處理
        return throwError(error);
      })
    );
  }
}

在這個示例中，我們使用 catchError 操作符捕獲請求中的錯誤，并根據錯誤狀態碼進行相應的處理。

3.3 添加請求日志

在某些情況下，我們可能需要記錄每個請求的詳細信息，例如請求 URL、請求方法、請求時間等。通過攔截器，我們可以輕松地添加請求日志：

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const startTime = Date.now();
    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          const elapsedTime = Date.now() - startTime;
          console.log(`Request to ${req.url} took ${elapsedTime}ms`);
        }
      })
    );
  }
}

在這個示例中，我們使用 tap 操作符記錄請求的響應時間。

3.4 緩存請求

在某些情況下，我們可能希望緩存某些請求的結果，以避免重復請求。通過攔截器，我們可以實現簡單的請求緩存機制：

@Injectable()
export class CacheInterceptor implements HttpInterceptor {
  private cache = new Map<string, HttpResponse<any>>();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.method !== 'GET') {
      return next.handle(req);
    }

    const cachedResponse = this.cache.get(req.url);
    if (cachedResponse) {
      return of(cachedResponse);
    }

    return next.handle(req).pipe(
      tap(event => {
        if (event instanceof HttpResponse) {
          this.cache.set(req.url, event);
        }
      })
    );
  }
}

在這個示例中，我們使用一個 Map 對象來緩存 GET 請求的響應結果。如果請求的 URL 已經存在于緩存中，則直接返回緩存的響應。

4. 多個攔截器的執行順序

在實際開發中，我們可能會使用多個攔截器來處理不同的任務。Angular 會按照攔截器的注冊順序依次執行它們。例如，如果我們注冊了 AuthInterceptor 和 LoggingInterceptor，那么它們的執行順序如下：

1. AuthInterceptor 首先執行，添加認證信息。
2. LoggingInterceptor 隨后執行，記錄請求日志。

因此，攔截器的注冊順序非常重要，需要根據實際需求進行合理安排。

5. 總結

HTTP 攔截器是 Angular 中非常強大的工具，它允許我們在請求發送和響應接收時進行統一的處理。通過攔截器，我們可以輕松地實現認證、錯誤處理、日志記錄、請求緩存等功能，從而簡化代碼并提高開發效率。

在實際開發中，我們可以根據需求創建多個攔截器，并通過合理的注冊順序來確保它們按照預期執行。希望本文能夠幫助你更好地理解和使用 Angular 中的 HTTP 攔截器機制。