介绍

在 Angular 应用中，HttpClient 拦截器允许你在发送请求和处理响应之前或之后对它们进行拦截和修改。这在进行身份验证、全局错误处理或日志记录时非常有用。本文将详细介绍如何创建和使用 HttpClient 拦截器。

创建拦截器

首先，你需要使用 Angular CLI 创建一个新的拦截器。运行以下命令：

ng generate interceptor auth

这将生成一个名为 `auth.interceptor.ts` 的文件。打开该文件，你会看到默认的拦截器实现。

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
    // 在这里添加你的逻辑，比如添加认证头
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer your_token_here')
    });

    return next.handle(authReq).pipe(
      catchError(err => {
        // 全局错误处理逻辑
        if (err instanceof HttpErrorResponse) {
          // 可根据你的需求进行错误处理
          console.error('An error occurred:', err.error.message || err.statusText);
        }
        return throwError(() => new Error('Something bad happened; please try again later.'));
      })
    );
  }
}

            

注册拦截器

为了在全局范围内使用拦截器，你需要在 `app.module.ts` 文件中注册它。

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/auth.interceptor';

// 在 @NgModule 的 providers 数组中注册拦截器
@NgModule({
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ]
})
export class AppModule { }

            

实践案例

以下是一个实际的案例，展示如何使用拦截器为所有请求添加认证头，并处理全局错误。

假设我们有一个用户服务，它使用 HttpClient 发送 GET 请求获取用户信息。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface User {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  getUser(id: number): Observable {
    return this.http.get(`${this.apiUrl}/${id}`);
  }
}

            

现在，当你调用 `getUser` 方法时，拦截器会自动为请求添加 `Authorization` 头，并在发生错误时进行全局处理。

结论

通过本文，你应该了解了如何在 Angular 中创建和使用 HttpClient 拦截器来拦截和处理 HTTP 请求和响应。拦截器可以大大简化你的代码，特别是当需要在多个地方处理相同的逻辑时。