在 Angular 应用中，有些错误可能不能被特定的组件所处理，并且可能会对整个应用造成影响。为了处理这类错误，我们可以使用 Interceptor，它可以拦截应用中的 HTTP 请求和响应，然后进行全局的错误处理。
Interceptor 简介
Interceptor 可以在应用的整个 HTTP 请求和响应周期中进行干预。当发送请求或接收响应时，可以通过 Interceptor 对请求或响应进行必要转换和处理。它们可以用于添加Authorization header，处理错误等。
在 Angular 中，我们可以使用 HttpInterceptor 接口来实现 Interceptor，它可以在应用中的所有请求或响应的过程中进行全局的处理。
错误处理
在应用中，有时会发生错误，例如网络错误或者服务器错误等。考虑到这些情况，我们需要全局地处理这些错误，以便在用户界面上报告错误并提示用户重新尝试。
在 Interceptor 中，我们可以拦截每个 HTTP 响应，并在错误发生时进行处理。例如，我们可以在发生错误时向用户显示一个通知，以告知他们发生了什么，并提供相应的指导。
实现
下面是一个例子，展示了如何使用 Interceptor 完成全局的错误处理。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- ---------------- ------------ ------------ ------------- ----------------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
------ - ----------- - ---- ------------------------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- --------- ------------ --
------------------ ----------------- ----- ------------- -------------------------- -
-- ----
------ --------------------------
------------------ ------------------ -- -
-- ------------ ---------- ----------- -
-- -----
-------------------- ------ -- ---------------------
- ---- -- ------------- --- ---- -
-- -------
---------------------- -------- ------ ----- -- --------------
-
-- ------
--------------------------------- ----- -
--------- -----
---
-- ----------- -----------
------ ------------------
--
--
-
-在上面的代码中，我们定义了一个 ErrorInterceptor 类，并实现了 HttpInterceptor 接口。intercept 方法被调用来处理每个请求和响应，并返回一个 Observable 类型的 HttpEvent。在实现中，我们使用了 catchError 方法来捕获错误，并进行相应的处理。
如果捕获到客户端错误，我们会在控制台中显示错误，并继续处理下一个 Interceptor。如果服务器返回错误，则显示通知，并继续处理下一个 Interceptor。
注册 Interceptor
要使 Interceptor 有效，我们需要在应用程序中注册它。在应用程序启动时，我们应该将注册一个 HttpInterceptorProvider 来让 Angular 知道我们的拦截器的存在，并处理请求和响应。
在 app.module.ts 中定义 providers 来注册拦截器：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
----------------
--
---------- -
- -------- ------------------ --------- ----------------- ------ ---- -
--
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们注册了一个 provide 为 HTTP_INTERCEPTORS 的 Provider，并指定类 ErrorInterceptor 作为其 useClass 值。multi 参数告诉 Angular，我们的拦截器不是唯一的，还有可能有其他的拦截器存在。
结论
通过使用 Angular 中的 Interceptor，我们可以在 HTTP 请求和响应中进行全局的错误处理。在应用程序启动时，我们应该将拦截器注册到 providers 中，以便在整个应用程序中使用。通过这种方式，我们可以更容易地处理错误，提供重新尝试的机会，并向用户发送适当的提示信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b8291d91dce0dc88b0062