前言
在前端开发中，与后端交互的过程中，我们经常需要向后端 API 发起 HTTP 请求。而在 Angular 中，常常使用 HttpClient 来实现这个功能。但是，为了方便地处理一些共同的问题，比如认证、数据转换等，我们需要使用 HttpClient 拦截器。
本文将为大家介绍如何使用 Angular 中的 HttpClient 拦截器，包括拦截器的概念、工作流程，以及如何自定义拦截器来满足不同的需求。
拦截器的概念与工作流程
拦截器是一种机制，用于在 HTTP 请求或响应时，拦截处理程序的请求或响应。在 Angular 中，我们可以使用 HttpInterceptor 接口来实现自定义拦截器。
Angular 中的拦截器流程如下所示：
拦截器在发送请求之前拦截请求，并在收到响应后处理响应。通过拦截器，我们可以处理常见问题，例如：
- 准备发送请求时，添加共同的请求头参数（如授权令牌）。
- 在收到响应后，对响应的数据进行转换和处理。
- 在发生错误时，处理错误和发出错误提示。
HttpClient 中的拦截器
HttpClient 是 Angular 中用于发起 HTTP 请求的服务。而在 HttpClient 中，提供了两种拦截器：
- HttpInterceptor：用于拦截 HTTP 请求和响应。
- HttpHandler：用于处理 HTTP 请求，可以部分或完全处理请求。HttpInterceptor 可以将请求或响应链传递给下一个 HttpInterceptor，或者将请求或响应传递给最后一个 HttpHandler。
如何使用拦截器
首先，我们需要创建一个实现 HttpInterceptor 接口的类，其中包含两个方法：
- intercept()：这是拦截器的主要方法，用于处理 HTTP 请求或响应。
- next.handle()：这个方法用于将请求或响应传递给下一个拦截器或最后一个 HttpHandler。
实现一个简单的 HttpInterceptor，拦截所有请求并打印请求 URL：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- ------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
-------------------------- - -----------------
------ ---------------------
-
-在 AppModule 中配置拦截器：
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: MyInterceptor,
multi: true
}
]配置后，每次发起 HTTP 请求时，都会进行拦截。
实战：拦截器处理 API 授权
示例场景：发起请求时在请求头中携带一个 ApiToken（Authorization）。
首先，我们需要创建一个 AuthInterceptor，实现 HttpInterceptor 接口并实现 intercept 方法：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ----------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
------ ----- --------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
----- ----- - ---------------------------------
-- ------- -
-- ---- ------- ----- -------
------- - ---------------
----------- -
-------------- ------- ---------
-
---
-
------ ---------------------
-
-在 AppModule 中配置：
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}
]这个拦截器会在请求时检查是否存在 ApiToken。如果找到它，则拦截器将添加请求头 Authorization，为其设置一个类似 bearer token 的值，然后继续处理请求。若未找到，则 HttpInterceptor 略过此步骤。
总结
在 Angular 中使用 HttpClient 拦截器可以方便地处理请求或响应。本文介绍了拦截器的基本概念和工作流程，以及 HttpClient 中使用拦截器的方法和示例代码。希望本文可以帮助读者更好地了解和使用拦截器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a833b48841e98948a5589