介绍
在前端开发中，通过 HTTP 请求获取数据已经成为必不可少的功能。然而，HTTP 请求和响应往往需要进行很多共同处理，例如添加统一的请求头、对返回的数据进行预处理等等。如果每次都在请求和响应中单独进行处理，将会很冗余而且难于维护。因此，Angular 提供了 HTTP 拦截器（interceptor）机制，用于在所有的请求和响应中添加额外的处理逻辑。
HTTP 拦截器的作用
HTTP 拦截器是 Angular 中一个非常重要的特性。通过这个机制，我们可以在请求和响应中添加处理逻辑，使得请求和响应更加符合我们的需求。具体来说，HTTP 拦截器可以用来实现以下功能：
- 对请求和响应进行统一处理，例如添加请求头、对返回的数据进行预处理等等；
- 在请求发出前和响应返回后进行处理，例如在请求发出前显示 loading 动画，在响应返回后隐藏 loading 动画等等；
- 处理错误信息，例如对某些错误进行特殊处理或者将错误信息显示在页面上。
使用 HTTP 拦截器示例
接下来，我们将通过一个使用 HTTP 拦截器的示例来介绍如何配置和使用拦截器。假设我们需要向服务器发出 GET 请求，并在请求开始前显示 loading 动画，在请求结束后隐藏 loading 动画，同时对返回的数据进行预处理。
首先，我们需要定义一个 HTTP 拦截器：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
----------------
------------
------------
------------
- ---- -----------------------
------ - ---------- - ---- -------
------ - --------- --- - ---- -----------------
-------------
------ ----- ------------------ ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
-- -------- ------- --
--------------
------ --------------------------
-- --------
--------- -- -
-- ------ ---------- ------------- -
----- ---- - -----------
------ ------------- ----- -------------------- ---
-
---
-- -------- ------- --
----------- -- --------------
--
-
-
-------- ------------- -
-- -- ------- --
-
-------- ------------- -
-- -- ------- --
-
-------- -------------------- ----- --- -
-- -----------
------ -----
-在上面的代码中，我们定义了一个 LoadingInterceptor 类用于处理请求和响应。该类实现了 HttpInterceptor 接口，并覆盖了其中的 intercept 方法。在该方法中，我们首先调用 showLoading 方法显示 loading 动画，然后调用 next.handle(request) 发出请求，并通过 map 运算预处理返回的数据，最后调用 finalize 隐藏 loading 动画。
下一步，我们需要将该拦截器添加到 HttpClient 中。在 app.module.ts 中添加以下代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ------------------ - ---- ------------------------
-----------
-------- --------------- ------------------
------------- ---------------
---------- -
-
-------- ------------------
--------- -------------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --在上述代码中，我们在 providers 中添加了一个 HTTP_INTERCEPTORS 配置项，用于指定我们刚刚定义的 LoadingInterceptor。这里需要注意的是，由于 Angular 可以同时运行多个拦截器，因此 HTTP_INTERCEPTORS 是一个数组。通过 multi: true 来指定 providers 数组中可以存在多个拦截器。
最后，我们可以在组件中使用 HttpClient 发出 GET 请求：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ---------------------------------
-
--
------ ----- ------------ -
------------------- ----- ----------- --
--------- -
-------------------------------------------------------------------------------- -- -
----------------------
---
-
-通过以上代码，我们就完成了 HTTP 拦截器的配置和使用，可以成功地实现请求前显示 loading 动画、请求后隐藏 loading 动画以及对返回数据进行预处理等多种功能。
总结
本文介绍了 Angular 中 HTTP 拦截器的使用方法，并通过一个实际的示例来演示了如何实现请求前显示 loading 动画、请求后隐藏 loading 动画以及对返回数据进行预处理等多种功能。使用 HTTP 拦截器可以大大提高代码的复用性和可维护性，是 Angular 开发中不可或缺的特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484423d48841e9894362632