在Angular应用程序中，拦截器是一个非常实用的功能，它允许开发者在HTTP请求或响应中进行操作拦截，而不会对正在发起的请求或响应发生任何干扰。拦截器可以对请求或响应进行各种操作，例如添加或删除标头、转换数据或更改错误处理等。
在本文中，我们将学习如何在Angular应用程序中实现拦截器，并对请求或响应进行操作拦截。
什么是拦截器 (Interceptor)?
拦截器是用于捕获HTTP请求或响应的拦截器函数。 拦截器可以修改请求或响应，以及处理正在运行的请求和响应产生的所有错误。
我们可以将拦截器视为一组发生在请求和响应之间的拦截函数，你可以在拦截器函数中添加自己的逻辑并返回修改后的请求或响应对象。
如何创建拦截器 (Interceptor)
在Angular应用程序中，我们可以通过继承 HttpInterceptor 类并实现 intercept 方法来创建拦截器。intercept 方法接受两个参数，一个请求对象 HttpRequest 和一个 HttpHandler。
HttpRequest 是请求对象，它包含所有的HTTP请求信息，例如请求头、请求体等。 HttpHandler 是处理请求对象的处理程序。当我们使用 handle 方法来处理请求时，它会返回 Observable<HttpEvent<any>>，这是一个 RXJS 可观察对象。
拦截器可以改变 header 和 body，甚至可以修改 url。我们可以在 intercept 方法中进行任何操作。
现在让我们看看如何创建一个简单的拦截器。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ---------- ------------ ----------- - ---- -----------------------
-------------
------ ----- ------------------ ---------- --------------- -
-------------- ----------------- ----- ------------- -------------------------- -
-- -------
--- - ----------- -------- -------------------------------- ------- - - ------------------------------ ---
------ -----------------
-
-上面的代码是一个简单的 ExampleInterceptor，它将从本地存储获取JWT令牌并将其添加到请求头中。这是一个非常简单的示例，但是你可以在其中添加任何功能以满足您的需求。
如何在Angular应用程序中使用拦截器
我们已经定义了一个拦截器，现在我们需要在 Angular 应用程序中使用它。创建完拦截器后，我们需要将其注册到应用程序提供商中，并将其与 HttpClient 建立关系。
要将拦截器注册到应用程序中，请在 providers 中添加以下代码：
{ provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }要将拦截器与HttpClient建立关系，请使用注入器将其提供给 HttpClient。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------ - ------------------ - ---- ------------------------
------------------- ----- ----------- ------- ------------------- ------------------- --
---------- -
-------------------------- - -------- ---------- --
------------------- -- -
----------------------
---
-在上面的代码中，我们注入之前创建的 ExampleInterceptor，并在HttpClient的请求选项中设置 observe: 'response'。通过设置观察器 { observe: 'response' }，我们可以访问完整的响应对象。
总结
拦截器是 Angular 应用的一个非常强大的功能。它允许开发者对发起的请求和返回的响应进行操作，而不会对正在进行的请求或响应造成影响。在本文中，我们已经学习了如何在Angular应用程序中实现拦截器，并且实现了一个拦截器功能进行请求拦截。这将为Angular开发人员提供一个有益的指导，并为所有开发人员提供一个有用的介绍概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d2618968c7c53b0bef45d