在现代 Web 应用中，前端和后端交互的方式已经从传统的页面刷新式转变为了利用 Ajax 技术的异步交互方式。在 Angular 应用中，我们通常会使用 Angular 自带的 HttpModule 中的 HttpClient 来与后端进行交互。但是我们在开发中可能需要对我们的所有请求进行某些操作，比如在每次请求时加入一些 header 信息，或者在请求返回之后对返回的数据进行一些操作（比如统一进行加密或解密处理），这时候就需要使用 Http 拦截器了。
什么是 Http 拦截器？
Http 拦截器是一个 Angular 提供的中间件机制，它允许我们在请求发起之前、请求返回之后、请求错误时等各个阶段进行拦截、修改请求信息，或者拦截、处理响应信息等操作。
如何实现 Http 拦截器？
在 Angular 中实现 Http 拦截器非常简单。我们只需要创建一个实现 HttpInterceptor 接口的类，该接口包括一个 intercept() 方法，该方法将会被 Angular 的 HttpClient 对象调用。
如何使用 Http 拦截器？
在实现了 HttpInterceptor 接口的拦截器类之后，我们需要将其添加到模块中。在我们的应用中，通常会将其放在 app.module.ts 中的 providers 数组中。这样当应用启动时，该拦截器将被 Angular 注入到 HttpClient 中，并在所有请求中生效。
示例代码
我们来看一个具体的例子：
// javascriptcn.com 代码示例
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// 在此处对 request 进行处理
const modifiedRequest = request.clone({
setHeaders: {'customHeaderKey': 'customHeaderValue'}
});
return next.handle(modifiedRequest);
}
}上面的代码展示了一个拦截器类，它会在每次请求时在请求头中加入一个自定义的 key-value 值对。我们只需要在 app.module.ts 中注册这个拦截器即可。
// javascriptcn.com 代码示例
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomHttpInterceptor } from './interceptor/custom-http.interceptor';
@NgModule({
imports: [HttpClientModule],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: CustomHttpInterceptor,
multi: true
}],
})
export class AppModule { }在上面的代码中，我们通过 providers 数组导入了 CustomHttpInterceptor 类，并将其注册到了 AppModule 模块的 providers 数组中，并标记为多个拦截器。这样，该拦截器就会在每个请求时被使用。
总结
通过上述的介绍，我们学习了 Http 拦截器在 Angular 应用中的使用方法及其示例。拦截器能够方便地统一处理我们的请求和响应，并且能帮助我们避免在复杂的项目中出现重复的代码，大大提升了我们的开发效率。在开发过程中，我们需要根据具体的场景对拦截器进行设计和实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652888c47d4982a6ebb0be3c