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

Angular项目中使用拦截器处理HttpClient请求响应

Angular的拦截器（Interceptor）提供了一种机制，可以拦截所有的HTTP请求和响应，并在它们传递到或从服务器返回之前进行处理。这使得我们可以集中处理一些通用的任务，比如：

• 添加请求头: 如身份验证token、自定义请求头等。
• 错误处理: 统一处理各种类型的错误，如401未授权、500服务器错误等。
• 日志记录: 记录所有的请求和响应，方便调试和分析。
• 加载指示器: 显示加载状态，提升用户体验。
• 缓存: 缓存请求结果，减少重复请求。

创建拦截器

1. 创建一个实现HttpInterceptor接口的服务:

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

@   Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent   <any>> {
    // 在这里添加你的拦截逻辑
    const token = localStorage.getItem('token');
    if (token) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
    }

    return next.handle(reque   st).pipe(
      catchError((error: HttpErrorRe   sponse) => {
        // 错误处理
        console.error('An error occurred:', error);
        return throwError(error);
      })
    );
  }
}

2. 在app.module.ts中注册拦截器:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
im   port { AppComponent } from './app.component';
import    { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_I   NTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export c   lass AppModule { }

拦截器工作原理

• 当发送HTTP请求时，Angular会依次调用所有注册的拦截器。
• 每个拦截器都可以对请求进行修改，然后将请求传递给下一个拦截器或HTTPBackend。
• 响应返回时，拦截器也会按照相反的顺序被调用。

拦截器常用场景

• 添加/修改请求头: 如添加认证token、自定义请求头等。
• 错误处理: 统一处理各种类型的错误，如401未授权、500服务器错误等。
• 加载指示器: 显示加载状态，提升用户体验。
• 缓存: 缓存请求结果，减少重复请求。
• 日志记录: 记录所有的请求和响应，方便调试和分析。
• 数据转换: 对请求或响应数据进行转换。

注意事项

• 多个拦截器: 可以注册多个拦截器，它们会按照注册的顺序依次执行。
• 异步处理: 拦截器中可以使用RxJS的异步操作符来处理异步请求。
• 性能优化: 避免在拦截器中进行过多的耗时操作，以免影响应用性能。
• 错误处理: 对于错误情况，应该提供友好的用户提示或重定向。

总结

Angular的拦截器为我们提供了一种方便的方式来处理HTTP请求和响应。通过合理地使用拦截器，可以提高应用程序的安全性、可维护性和用户体验。

更多示例和详细说明，可以参考Angular官方文档： [移除了无效网址]

希望这个回答能帮助你更好地理解和使用Angular拦截器！

如果你还有其他问题，欢迎随时提问。