介绍
拦截器是 Angular 中一个非常重要的概念，它可以在 HTTP 请求和响应的过程中进行拦截和处理。在 Angular 4.x 后，Angular 引入了 HttpClient，相比于旧版的 Http 模块，HttpClient 更加强大和易用，而拦截器也成为了 HttpClient 中一个非常重要的功能。
拦截器可以对 HTTP 请求和响应进行干预，比如添加请求头、处理错误信息、对响应数据进行加工等等。使用拦截器可以使我们的代码更加简洁和易于维护。
本文将介绍 Angular 6.x 中拦截器的使用方法，并提供一些实际示例代码。
拦截器的基本使用
在 Angular 中，我们可以通过实现 HttpInterceptor 接口来创建一个拦截器。HttpInterceptor 接口定义了两个方法，分别是 intercept 和 handle，其中 intercept 方法用于拦截 HTTP 请求和响应，handle 方法用于处理 HTTP 请求。
在实现拦截器之前，我们需要在 app.module.ts 文件中导入 HttpClientModule，并将其添加到 imports 数组中：
------ - ---------------- - ---- -----------------------
-----------
-------- -
----------------
--
---
--
------ ----- --------- - -然后我们可以创建一个拦截器类，实现 HttpInterceptor 接口：
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
-- --------------------------------
------ -----------------
-
-在上面的代码中，我们实现了 intercept 方法，并将其注入到了 MyInterceptor 类中。在 intercept 方法中，我们可以对请求进行拦截和处理，比如添加请求头、处理错误信息等等。最后我们需要返回 next.handle(req) 来继续处理该请求。
接下来，我们需要将 MyInterceptor 类添加到 providers 数组中，以便可以在整个应用程序中使用该拦截器：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
-------- -
--------------
----------------
--
------------- -
------------
--
---------- -
-
-------- ------------------
--------- --------------
------ ----
-
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们将 MyInterceptor 类添加到 providers 数组中，并设置 provide 为 HTTP_INTERCEPTORS，useClass 为 MyInterceptor，multi 为 true。这样就可以在整个应用程序中使用该拦截器了。
拦截器的高级使用
除了基本使用外，Angular 中的拦截器还有一些高级用法，比如：
多个拦截器的使用
在 Angular 中，我们可以使用多个拦截器来实现不同的功能。多个拦截器按照添加的顺序依次执行，最后再执行真正的 HTTP 请求。
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
-- --------------------------------
------ -----------------
-
-
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
-- --------------------------------
------ -----------------
-
-在上面的代码中，我们创建了两个拦截器类，分别是 MyInterceptor1 和 MyInterceptor2。接下来，我们需要将它们添加到 providers 数组中，并按照添加的顺序依次执行：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
------ - -------------- - ---- --------------------
-----------
-------- -
--------------
----------------
--
------------- -
------------
--
---------- -
-
-------- ------------------
--------- ---------------
------ ----
--
-
-------- ------------------
--------- ---------------
------ ----
-
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们将 MyInterceptor1 和 MyInterceptor2 添加到 providers 数组中，并按照添加的顺序依次执行。
对 HTTP 响应进行加工处理
在拦截器中，我们可以对 HTTP 响应进行加工处理，比如对响应数据进行加工、对错误信息进行处理等等。
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ ---------- ------------ - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
-------------
------ ----- ------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
------ ----------------------
--------- -- -
-- ------ ---------- ------------- -
-- ----------------------------
------------------------ -------
-
-- ----- -- -
-- --------------
--------------------- -------
--
--
-
-在上面的代码中，我们使用了 tap 操作符来对 HTTP 响应进行加工处理。在 tap 操作符中，我们可以判断 event 是否为 HttpResponse 类型，如果是则对响应数据进行加工处理。
对 HTTP 请求进行加工处理
在拦截器中，我们还可以对 HTTP 请求进行加工处理，比如添加请求头、添加请求参数等等。
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- ------- - -----------
-------- -------------------------------- ------- - - ------------------------------
---
------ ---------------------
-
-在上面的代码中，我们使用了 clone 方法来对 HTTP 请求进行加工处理。在 clone 方法中，我们可以添加请求头、添加请求参数等等。
示例代码
最后，我们提供一些实际示例代码，以便更好地理解拦截器的使用方法：
添加 JWT Token
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ --------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
----- ----- - ------------------------------
-- ------- -
----- ------- - -----------
-------- -------------------------------- ------- - - ------
---
------ ---------------------
-
------ -----------------
-
-在上面的代码中，我们创建了一个 JwtInterceptor 类，用于添加 JWT Token。在 intercept 方法中，我们首先从本地存储中获取 JWT Token，如果存在则添加到请求头中。
处理 HTTP 错误信息
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ ---------- ----------------- - ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
------ - ------------- - ---- -------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- ------- -------------- - -
-------------- ----------------- ----- ------------- -------------------------- -
------ ----------------------
--------- ----- -- -
-- ------ ---------- ------------------ -
-------------------------------- ---------
-
--
--
-
-在上面的代码中，我们创建了一个 ErrorInterceptor 类，用于处理 HTTP 错误信息。在 intercept 方法中，我们使用了 tap 操作符来捕获 HTTP 错误信息，并使用 ToastrService 来显示错误信息。
总结
本文介绍了 Angular 6.x 中拦截器的使用方法，并提供了一些实际示例代码。拦截器是 Angular 中一个非常重要的概念，使用拦截器可以使我们的代码更加简洁和易于维护。如果你正在学习 Angular，那么拦截器是一个必须掌握的知识点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cb5913add4f0e0ff50bf75