在前端开发中，我们经常需要使用 HttpClient 发送请求获取数据。但是，不同的 API 返回的数据格式不同，有时候需要对返回的数据进行处理。为了避免在每个请求中都进行相同的处理，我们可以使用 HttpClient 拦截器来统一处理 API 响应。
什么是 HttpClient 拦截器？
HttpClient 拦截器是 Angular 中的一个特性，它可以在发送请求和接收响应时拦截并进行处理。我们可以在拦截器中修改请求头、请求参数、响应数据等，从而实现一些常见的需求，比如统一加入 Token、统一处理错误码等。
如何使用 HttpClient 拦截器？
使用 HttpClient 拦截器非常简单，只需要创建一个拦截器类并实现 HttpInterceptor 接口即可。下面是一个示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
----------------
------------
------------
------------
- ---- -----------------------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
-------------
------ ----- -------------- ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
-- ------ -----
----- ----- - ------------------------------
-- ------- -
--- - -----------
----------- -
-------------- ------- ---------
-
---
-
-- --------
------ ----------------------
--------- -- -
-- ------ ---------- ------------- -
-- ----------- -- --------------- --- ---- -
-- -----
-
-
--
--
-
-上面的代码中，我们创建了一个名为 ApiInterceptor 的拦截器类，并实现了 HttpInterceptor 接口中的 intercept 方法。在 intercept 方法中，我们可以对请求和响应进行拦截和处理。
首先，我们在请求中添加了 Token。如果用户已经登录并且 Token 存在于本地存储中，我们就在请求头中添加 Token。这样，每次发送请求时都会自动带上 Token，无需在每个请求中都进行相同的操作。
接着，我们统一处理了响应数据。在 next.handle(req) 中，我们发送了请求并获取了响应。在 tap 操作符中，我们对响应进行了处理。如果响应的状态码不是 200，我们就可以在这里进行处理，比如弹出错误提示框。
最后，我们需要将拦截器类提供给 Angular 的依赖注入系统。在 app.module.ts 中，我们可以将拦截器类添加到 HTTP_INTERCEPTORS 数组中：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- --------------------
-----------
------------- ---------------
-------- --------------- ------------------
---------- -
-
-------- ------------------
--------- ---------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --总结
使用 HttpClient 拦截器可以大大简化我们的代码，避免重复的工作。通过拦截器，我们可以在请求和响应中进行统一处理，比如添加 Token、处理错误码等。在实际开发中，我们可以根据需求创建不同的拦截器类，并将它们添加到 HTTP_INTERCEPTORS 数组中，从而实现更加灵活的拦截和处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65e6af8e1886fbafa41d5a6e