在前端开发中，我们经常需要处理 HTTP 请求的错误。然而，在 Angular 应用程序中获取实时 HTTP 错误信息并不是一件非常容易的事情。本文将介绍一种解决方案，使得在 Angular 应用程序中获取实时 HTTP 错误信息轻而易举。
问题
在 Angular 应用程序中，我们通常使用 Angular 提供的内置 HttpClient 来进行 HTTP 请求。当请求发生错误时，我们希望能够捕获错误并获取错误信息。然而，默认情况下，HttpClient 是不会主动抛出错误的。取而代之的是，HttpClient 会返回一个包含错误信息的 Observable 对象，我们需要在订阅时手动处理这些错误。
这意味着在我们的每一个 HTTP 请求中，都需要进行重复的错误处理。这显然是一种低效而且容易出错的方式。
解决方案
我们提供了一种解决方案，在 Angular 应用程序中获取实时 HTTP 错误信息将变得轻而易举。我们使用了一个 HttpInterceptor，这个 HttpInterceptor 会在每一个 HTTP 请求中拦截并处理错误。一旦发生错误，它会抛出一个新的 Observable 对象，我们就可以在任何地方订阅这个对象，获取实时的错误信息了。
具体来说，我们需要做以下几个步骤：
步骤 1: 创建 ErrorInterceptor
我们需要先创建一个新的 HttpInterceptor，用于拦截和处理 HTTP 请求中的错误。以下是一个简单的 ErrorInterceptor 的实现：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------------- ------------ ------------ ----------------- - ---- -----------------------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -------
-------------
------ ----- ---------------- ---------- --------------- -
-------------- ----------------- ----- ------------ -
------ ----------------------
---------------- -- -
-- ------ ---------- ------------------ -
-------------------- ------ ------------ -------
------ ------------------
- ---- -
------ ------------------
-
--
--
-
-在上面的代码中，我们定义了一个名为 ErrorInterceptor 的 HttpInterceptor，并实现了 intercept 方法。
在 intercept 方法中，我们使用 next.handle(req) 来发起 HTTP 请求，并使用 pipe 函数将 catchError 操作符和 return throwError(error) 操作符添加到 Observable 链中。catchError 操作符用于捕获 HTTP 请求中发生的错误，return throwError(error) 用于重新抛出错误，以便我们可以在其他地方订阅这个错误。
步骤 2: 将 ErrorInterceptor 添加到 HttpClient 中
我们需要在 Angular 应用程序中注册 ErrorInterceptor，以便它能拦截每一个 HTTP 请求。以下是一个简单的注册方式：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ---------------- - ---- ----------------------
-----------
------------- -
-- ---
--
-------- -
--------------
----------------
--
---------- -
- -------- ------------------ --------- ----------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们在 providers 中注册了 ErrorInterceptor，并将其提供给 HTTP_INTERCEPTORS。这样就成功将 ErrorInterceptor 添加到了 HttpClient 中。
步骤 3: 订阅并处理错误
我们已经创建了一个 ErrorInterceptor，并成功将它添加到了 HttpClient 中。现在，我们可以在任何地方订阅错误并处理错误了。以下是一个简单的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- -----------
--------- -
---- ---------------------
-- ------------ --
------
-
--
------ ----- ------------ -
------------- -------
------------------- ----- ----------- -
--------------------------------------------------------------------------
-------- -- -
--------------------
--
------- -- -
----------------- - --------------
---------------------
-
--
-
-在上面的代码中，我们首先创建了一个 errorMessage 变量，并将其绑定到了模板中。然后，我们使用 HttpClient 发起了一个 HTTP 请求，并订阅了这个请求。当 HTTP 请求发生错误时，我们会重新抛出这个错误并捕获它，将 errorMessage 变量更新为错误信息，并打印错误信息到控制台。
总结
现在，您已经掌握了一种在 Angular 应用程序中获取实时 HTTP 错误信息的解决方案。通过使用我们提供的 ErrorInterceptor，您可以轻松地捕获和处理每一个 HTTP 请求中的错误。如果您在实现过程中遇到任何问题，请随时联系我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654f38117d4982a6eb8327d8