在前端开发中，我们经常需要向后端发送请求获取数据。但有些情况下，我们需要对请求进行一些额外的处理，例如添加请求头、对请求参数进行加密等。这时候，就可以使用 Angular 中的 HttpInterceptor 实现请求拦截器。
HttpInterceptor 的作用
HttpInterceptor 是 Angular 提供的一个拦截器接口，可以用来在发送请求和接收响应的过程中，对请求和响应进行一些额外的处理。HttpInterceptor 接口提供了两个方法：
- intercept：拦截请求和响应，并进行处理
- handle：发送请求并返回响应
通过实现 HttpInterceptor 接口并注册到 Angular 的 HttpClientModule 中，我们可以对所有的请求进行统一的处理，而不需要在每个请求中都添加一遍相同的代码。
实现 HttpInterceptor
下面我们来看一个简单的例子，实现一个拦截器，在每个请求头中添加一个 token。
首先，我们需要创建一个拦截器类，实现 HttpInterceptor 接口：
-- -------------------- ---- ------- ------ - ---------- - ---- ---------------- ------ - ---------------- ------------ ------------ --------- - ---- ----------------------- ------ - ---------- - ---- ------- ------------- ------ ----- ---------------- ---------- --------------- - ------------------ ----------------- ----- ------------- -------------------------- - ----- ----- - ------------------ ------- - --------------- ----------- - -------------- ------- --------- - --- ------ --------------------- - -展开代码
在上面的代码中，我们实现了 intercept 方法，它接收一个 HttpRequest 对象和一个 HttpHandler 对象，分别表示当前的请求和下一个拦截器（如果有的话）。我们在 intercept 方法中对请求进行了处理，为请求头添加了一个 Authorization 字段，值为我们设定的 token。最后，我们调用了 next.handle(request) 方法，将请求传递给下一个拦截器或者 HttpClient。
接下来，我们需要在 AppModule 中将拦截器注册到 HttpClientModule 中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------- ----------------- - ---- ----------------------- ------ - ---------------- - ---- ---------------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------------ ------------- --------------- ---------- - - -------- ------------------ --------- ----------------- ------ ---- - -- ---------- -------------- -- ------ ----- --------- --展开代码
在上面的代码中，我们使用 HTTP_INTERCEPTORS 提供的 token，将 TokenInterceptor 类注册为拦截器，并设置 multi: true，表示这个拦截器可能会被多次使用。
拦截器的执行顺序
在实际开发中，可能会有多个拦截器需要执行。这时候，拦截器的执行顺序就非常重要了。
Angular 中的拦截器按照注册的顺序依次执行。也就是说，先注册的拦截器先执行，后注册的拦截器后执行。如果其中一个拦截器返回了一个 Observable 对象，则后续的拦截器就不会执行了。
总结
在本文中，我们介绍了 Angular 中的 HttpInterceptor 接口，以及如何使用它实现请求拦截器。我们还讨论了拦截器的执行顺序问题。通过使用拦截器，我们可以在请求和响应过程中对数据进行一些额外的处理，从而提高开发效率和代码可维护性。
示例代码：https://stackblitz.com/edit/angular-httpinterceptor-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d76fdd1886fbafa453a29d
