Angular项目如何使用拦截器 httpClient 请求响应处理

在Angular中，拦截器（Interceptor）是一种用于拦截和处理HTTP请求或响应的机制。HttpClient模块提供了一种方便的方式来创建拦截器，以便在发送请求或接收响应之前或之后执行一些操作。

以下是如何在Angular项目中使用HttpClient拦截器的基本步骤：

1. 创建拦截器类：首先，你需要创建一个继承自HttpInterceptor类的拦截器类。

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

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 在这里可以修改请求或添加请求头

    const modifiedReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer ' + this.getToken())
    });

    // 将修改后的请求发送到下一个拦截器或后端
    return next.handle(modifiedReq).pipe(
      // 可以在这里处理响应
    );
  }

  private getToken(): string {
    // 假设这里获取了存储在本地的token
    return localStorage.getItem('token');
  }
}

2. 注册拦截器：在你的Angular模块中（通常是AppModule），你需要将拦截器添加到提供者列表中。

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './path-to-my-interceptor';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    // ...
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 使用拦截器：一旦拦截器被注册，它将自动应用于所有使用HttpClient模块发出的请求。

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

constructor(private http: HttpClient) {}

getData() {
  this.http.get('https://api.example.com/data').subscribe(data => {
    console.log(data);
  });
}

4. 处理响应：你可以在intercept方法中添加逻辑来处理响应。例如，如果响应状态码是401（未授权），你可能想要自动重试请求或清除本地存储的token。

import { throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

// ...

return next.handle(modifiedReq).pipe(
  catchError(error => {
    if (error.status === 401) {
      // 处理401错误，例如清除token
      localStorage.removeItem('token');
      // 可以重试请求或返回错误
    }
    return throwError(error);
  }),
  retry(3) // 可选：重试请求
);

通过使用拦截器，你可以集中处理HTTP请求和响应的逻辑，使代码更加模块化和易于维护。