Angular怎么对请求进行拦截封装

前言

在开发 Web 应用程序时，我们经常需要与后端服务器进行通信。为了更好地管理和处理请求，Angular 提供了拦截器（interceptor）功能，可以拦截和转换发出的请求和响应。

拦截器的作用

拦截器可以用于各种用途，例如：

• 在发送请求前添加通用的请求头信息
• 在接收到响应后进行错误处理或转换数据
• 在接收到响应后进行通用的处理，如身份验证刷新令牌
• 在发出请求和接收到响应时显示加载指示器

通过使用拦截器，我们可以在应用程序的不同部分共享和重用这些功能。

拦截器的实现

要使用拦截器，我们需要创建一个实现 Angular 的 HttpInterceptor 接口的类。这个接口有两个必须实现的方法：intercept 和 match。拦截器类需要使用 @Injectable 装饰器进行注解，并通过 providedIn 属性来指定它的提供者。

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

@Injectable({
  providedIn: 'root'
})
export class MyInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest, next: HttpHandler): Observable> {
    // 在这里进行请求拦截和处理逻辑
    return next.handle(request);
  }
}

在 intercept 方法内，我们可以获取到当前的请求对象 request，并在需要时进行修改。拦截器还需要调用 next.handle(request) 方法来传递请求给下一个处理器。

将拦截器应用到请求

为了将拦截器应用到请求中，我们需要在 Angular 应用的根模块中的 providers 数组中注册拦截器类。

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

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

通过 multi: true，我们将拦截器添加到了一个拦截器集合中，而不是只应用到一个请求上。

总结

拦截器是 Angular 提供的一个强大功能，可以方便地对请求进行拦截和封装。通过创建拦截器类并在根模块中进行注册，我们可以实现对请求的统一处理和个性化定制，提高代码的可维护性和复用性。