Angular 是一种流行的前端框架，可用于构建现代 Web 应用程序。在 Angular 应用程序中，HTTP Interceptor 是一种非常有用的功能，可用于拦截 HTTP 请求和响应，并在它们到达服务器或从服务器返回之前对它们进行处理。但是，如果 HTTP 请求出现错误，如何在 Interceptor 中捕获和处理这些错误呢？
HTTP Interceptor 简介
HTTP Interceptor 是 Angular 的一个特性，它是拦截器的一个实例，可在 HTTP 请求和响应过程中对它们进行处理。HTTP Interceptor 是在 Angular HTTP 模块中定义的，它是用于拦截 HTTP 请求和响应的一个工具。
在 Angular 中，使用HTTP Interceptor可以：
- 从HTTP请求和响应中添加，移除或修改头
- 修改请求和响应主体
- 在请求和响应之前和之后执行任意代码
- 在 HTTP 错误发生时进行处理
拦截器中的 HTTP 错误
当 HTTP 请求出现错误时，你需要确保你的 Interceptor 能够捕获和处理这些错误。如果你的 Interceptor 没有正确地处理错误，你的应用程序可能会因此出现问题或崩溃。
Angular 中的 Interceptor 可以使用 catchError 操作符捕获错误。catchError 操作符返回一个 Observable，在发生错误时向该 Observable 发送错误。
以下是一个示例 Interceptor：
-- -------------------- ---- -------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- ------- -------------- --
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------- --- ---- -
----------------------------------
-
------ ------------------------
--
--
-
-在这个示例中，ErrorInterceptor 使用 catchError 操作符捕获了 HTTP 错误，并在错误发生时使用 ToastrService 显示错误消息。如果请求结果包含错误，则返回一个带有该错误的 Observable。
如何在 Interceptor 中使用 HTTP 错误
当你的应用程序发生 HTTP 错误时，在 Interceptor 中使用 catchError 操作符是一个很好的处理方法。你可以在 catchError 中执行自己的逻辑，例如：
- 显示错误消息
- 重试请求
- 跳转到自定义错误页面
- 等等
对于大多数应用程序，使用 ToastrService 类似于上面的示例是一个很好的选择。只需将 ToastrService 注入到 Interceptor 中，然后在错误发生时显示错误消息即可。
-- -------------------- ---- -------
------------------- ------- -------------- --
-- ----
------------------- ------------------ -- -
-- ------------- --- ---- -
----------------------------------
-
------ ------------------------
--当然，你也可以执行其它操作。如果你想重试请求或跳转到自定义错误页面，你可以在 Interceptor 中执行相应逻辑。
结论
在 Angular 应用程序中，拦截器是非常有用的功能，可以用于拦截 HTTP 请求和响应，对它们进行处理。当 HTTP 请求出现错误时，你需要确保你的 Interceptor 能够捕获和处理这些错误。可以通过使用 catchError 操作符捕获错误并在 Interceptor 中执行自己的逻辑，例如显示错误消息、重试请求或跳转到自定义错误页面等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672327b12e7021665e0ea41c