在 Angular 中使用 HTTP 拦截器
HTTP 拦截器是 Angular 中的一个强大功能，它允许我们在 HTTP 请求和响应之间添加自定义行为。通过使用 HTTP 拦截器，我们可以在应用程序中添加全局处理逻辑，例如添加认证令牌、处理错误和日志记录。
在本文中，我们将深入了解 Angular 中的 HTTP 拦截器，并提供一些示例代码来帮助您开始使用它。
HTTP 拦截器的基本用法
在 Angular 中使用 HTTP 拦截器非常简单。我们只需要创建一个实现 HttpInterceptor 接口的类，并将其提供给 HTTP 客户端以使用。
以下是一个简单的 HTTP 拦截器，它将在每个请求中添加一个自定义标头：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- ----------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
----- --------- - -----------
-------- ---------------------------------- ------- ------ -------
---
------ -----------------------
-
-在这个例子中，我们创建了一个名为 CustomInterceptor 的类，它实现了 HttpInterceptor 接口。在 intercept 方法中，我们使用 HttpRequest 的 clone 方法来创建一个新的请求对象，并在其中添加了自定义标头。
最后，我们将新的请求对象传递给 next.handle 方法，并返回其结果。这将继续处理该请求，并将响应返回给调用方。
要使用这个拦截器，我们只需要将其提供给 HttpClient 的拦截器数组：
-- -------------------- ---- -------
------ - ----------------- ----------------- - ---- -----------------------
-----------
-------- -------------------
---------- -
-
-------- ------------------
--------- ------------------
------ ----
-
-
--
------ ----- --------- - -在这个例子中，我们将 CustomInterceptor 提供给 HTTP_INTERCEPTORS 令牌，并将 multi 属性设置为 true，以便允许多个拦截器同时运行。
处理 HTTP 错误
HTTP 拦截器的一个常见用途是处理 HTTP 错误。通过在拦截器中添加错误处理逻辑，我们可以避免在每个组件或服务中重复编写相同的代码。
以下是一个简单的 HTTP 错误处理器，它会在发生错误时显示一个警告消息：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ ----------------- - ---- -----------------------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -------
-------------
------ ----- ---------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
------ ----------------------
------------------ ------------------ -- -
--------- ----- --------- - - ---------------
------ ------------------
--
--
-
-在这个例子中，我们创建了一个名为 ErrorInterceptor 的类，它实现了 HttpInterceptor 接口。在 intercept 方法中，我们使用 catchError 操作符来捕获任何发生的错误，并在其中添加自定义错误处理逻辑。
请注意，我们使用 throwError 操作符来重新抛出错误。这将使错误继续传递到下一个处理程序。如果不重新抛出错误，HTTP 客户端将认为请求已成功完成，并返回一个空响应对象。
添加认证令牌
另一个常见的用例是在每个请求中添加认证令牌。通过在拦截器中添加此逻辑，我们可以避免在每个请求中手动添加标头。
以下是一个简单的认证拦截器，它将在每个请求中添加一个认证令牌：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ----------- - ---- -----------------------
-------------
------ ----- --------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
----- --------- - ----------------------------------
----- ------- - -----------
-------- -------------------------------- ------- --------------
---
------ ---------------------
-
-在这个例子中，我们创建了一个名为 AuthInterceptor 的类，它实现了 HttpInterceptor 接口。在 intercept 方法中，我们使用 localStorage 来获取存储在本地的认证令牌，并在其中添加了一个 Authorization 标头。
请注意，我们使用了模板字符串来构建标头值。这使得代码更加可读，并且可以轻松地添加其他标头。
结论
HTTP 拦截器是 Angular 中一个非常强大的功能。通过使用拦截器，我们可以全局处理 HTTP 请求和响应，并添加自定义行为。
在本文中，我们提供了一些示例代码，以帮助您开始使用 HTTP 拦截器。无论您是处理 HTTP 错误、添加认证令牌还是执行其他操作，HTTP 拦截器都是一个非常有用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6741fc1edb344dd98dce123a