在现代 Web 应用中，前端和后端交互的方式已经从传统的页面刷新式转变为了利用 Ajax 技术的异步交互方式。在 Angular 应用中，我们通常会使用 Angular 自带的 HttpModule 中的 HttpClient 来与后端进行交互。但是我们在开发中可能需要对我们的所有请求进行某些操作，比如在每次请求时加入一些 header 信息，或者在请求返回之后对返回的数据进行一些操作（比如统一进行加密或解密处理），这时候就需要使用 Http 拦截器了。
什么是 Http 拦截器？
Http 拦截器是一个 Angular 提供的中间件机制，它允许我们在请求发起之前、请求返回之后、请求错误时等各个阶段进行拦截、修改请求信息，或者拦截、处理响应信息等操作。
如何实现 Http 拦截器？
在 Angular 中实现 Http 拦截器非常简单。我们只需要创建一个实现 HttpInterceptor 接口的类，该接口包括一个 intercept() 方法，该方法将会被 Angular 的 HttpClient 对象调用。
如何使用 Http 拦截器？
在实现了 HttpInterceptor 接口的拦截器类之后，我们需要将其添加到模块中。在我们的应用中，通常会将其放在 app.module.ts 中的 providers 数组中。这样当应用启动时，该拦截器将被 Angular 注入到 HttpClient 中，并在所有请求中生效。
示例代码
我们来看一个具体的例子：
------ - ---------- - ---- ----------------
------ - ---------- ------------ ---------------- ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- --------------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
-- ---- ------- ----
----- --------------- - ---------------
----------- ------------------- --------------------
---
------ -----------------------------
-
-上面的代码展示了一个拦截器类，它会在每次请求时在请求头中加入一个自定义的 key-value 值对。我们只需要在 app.module.ts 中注册这个拦截器即可。
------ - ----------------- ----------------- - ---- -----------------------
------ - --------------------- - ---- ----------------------------------------
-----------
-------- -------------------
---------- --
-------- ------------------
--------- ----------------------
------ ----
---
--
------ ----- --------- - -在上面的代码中，我们通过 providers 数组导入了 CustomHttpInterceptor 类，并将其注册到了 AppModule 模块的 providers 数组中，并标记为多个拦截器。这样，该拦截器就会在每个请求时被使用。
总结
通过上述的介绍，我们学习了 Http 拦截器在 Angular 应用中的使用方法及其示例。拦截器能够方便地统一处理我们的请求和响应，并且能帮助我们避免在复杂的项目中出现重复的代码，大大提升了我们的开发效率。在开发过程中，我们需要根据具体的场景对拦截器进行设计和实现。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652888c47d4982a6ebb0be3c