在 Angular 项目中，我们经常需要与后端进行数据交互。为了优化代码，我们通常会将一些公共的操作封装成服务。而在服务中，我们又经常需要使用 HttpClient 进行 HTTP 请求。但是，每次请求都需要手动添加一些公共的参数或者进行一些公共的操作，这样既麻烦又容易出错。这时，HTTP 拦截器就可以帮助我们解决这些问题。
什么是 HTTP 拦截器
HTTP 拦截器是 Angular 提供的一种机制，可以在发送 HTTP 请求和接收 HTTP 响应的过程中，对请求和响应进行拦截和处理。我们可以使用 HTTP 拦截器来统一处理一些公共的操作，比如添加请求头、处理错误信息等。
如何使用 HTTP 拦截器
使用 HTTP 拦截器非常简单，只需要创建一个实现了 HttpInterceptor 接口的拦截器类，并在 AppModule 中将其注册即可。下面是一个简单的实现示例：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- ------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
-- --------------
----- ----------- - -----------
-------- -------------------------------- ------- - - ------------------------------
---
-- --------
------ -------------------------
-
-在上面的代码中，我们创建了一个名为 MyInterceptor 的拦截器类，并实现了 HttpInterceptor 接口中的 intercept 方法。在 intercept 方法中，我们可以对请求进行一些处理，比如添加请求头。最后，我们需要调用 next.handle 方法来发送处理后的请求。
在 AppModule 中，我们需要将 MyInterceptor 注册到 HTTP_INTERCEPTORS 中，如下所示：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
- -------- ------------------ --------- -------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- --在上面的代码中，我们将 MyInterceptor 注册到 HTTP_INTERCEPTORS 中，并设置 multi: true，表示可以注册多个拦截器。
HTTP 拦截器的执行顺序
如果注册了多个拦截器，那么它们的执行顺序会影响最终的请求和响应。HTTP 拦截器的执行顺序是从后往前的，也就是说，最后注册的拦截器会最先执行，而最先注册的拦截器会最后执行。下面是一个示例：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
------------------------------
------ -----------------
-
-
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
------------------------------
------ -----------------
-
-
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
------------------------------
------ -----------------
-
-在上面的代码中，我们创建了三个拦截器类 MyInterceptor1、MyInterceptor2 和 MyInterceptor3，并分别在其中输出了一些信息。在 AppModule 中，我们将它们注册到 HTTP_INTERCEPTORS 中，并按照 MyInterceptor3、MyInterceptor2、MyInterceptor1 的顺序注册。
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - --------------- --------------- -------------- - ---- -------------------
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
- -------- ------------------ --------- --------------- ------ ---- --
- -------- ------------------ --------- --------------- ------ ---- --
- -------- ------------------ --------- --------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- --当我们发送一个 HTTP 请求时，控制台会输出以下信息：
-------------- -------------- --------------
可以看到，拦截器的执行顺序是从后往前的。
总结
HTTP 拦截器是 Angular 提供的一种机制，可以在发送 HTTP 请求和接收 HTTP 响应的过程中，对请求和响应进行拦截和处理。使用 HTTP 拦截器可以统一处理一些公共的操作，比如添加请求头、处理错误信息等。在 Angular 项目中使用 HTTP 拦截器非常简单，只需要创建一个实现了 HttpInterceptor 接口的拦截器类，并在 AppModule 中将其注册即可。在注册多个拦截器时，它们的执行顺序是从后往前的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660b2ebbd10417a222b22245