在前端开发中，http 请求是必不可少的一部分。然而，在实际开发过程中，http 请求也很容易出现错误，如网络错误、服务器错误、请求超时等。因此，我们需要在 Angular 中处理这些错误，以便更好地控制和处理错误情况。
HTTP Interceptor
Angular 提供了一个叫做 HTTP Interceptor 的机制，可以拦截所有的 http 请求和响应。我们可以利用这个机制来处理所有的 http 请求中的错误。在 Angular 中，HTTP Interceptor 是通过实现 HttpInterceptor 接口来实现的。
以下是一个 HTTP Interceptor 的示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ -
----------
----------------
------------
------------
-------------
-----------------
- ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------ ---------- ----------- -
----------------- ----- ----------- ---------------------
- ---- -
--------------
-------- -------- ---- ---------------- - -
----- ---- -----------------
-
------ --------------------- --- --------- ------ --- ----- ---------
--
--
-
-在上面的代码中，我们创建了一个名为 ErrorInterceptor 的 HTTP Interceptor。在 intercept 方法中，我们使用 next.handle(request) 来发送 http 请求，并使用 pipe 方法来处理 http 响应。在 catchError 操作符中，我们处理 http 请求中的错误，并返回一个 Observable 对象。
错误处理
在 catchError 操作符中，我们可以根据错误类型来处理 http 请求中的错误。如果错误类型是 HttpErrorResponse，则说明是服务器返回的错误。我们可以根据错误状态码来判断错误类型，如 404 错误表示资源不存在，500 错误表示服务器内部错误等。
以下是一个处理 404 错误的示例代码：
-- -------------------- ---- -------
------------------ ------------------ -- -
-- ------------- --- ---- -
----------------------- --- -------- -----------
- ---- -
--------------
-------- -------- ---- ---------------- - -
----- ---- -----------------
-
------ --------------------- --- --------- ------ --- ----- ---------
--如果错误类型是 ErrorEvent，则说明是客户端出现的错误，如网络错误、请求超时等。我们可以使用 console.error 方法来输出错误信息。
以下是一个处理网络错误的示例代码：
-- -------------------- ---- -------
------------------ ------------------ -- -
-- ------------ ---------- ----------- -
----------------- ----- ----------- ---------------------
- ---- -
--------------
-------- -------- ---- ---------------- - -
----- ---- -----------------
-
------ --------------------- --- --------- ------ --- ----- ---------
--使用 HTTP Interceptor
要使用 HTTP Interceptor，我们需要将其提供给 Angular 的 HttpClient。可以在 AppModule 中提供 HTTP_INTERCEPTORS，并将 ErrorInterceptor 添加到拦截器数组中。
以下是一个使用 HTTP Interceptor 的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------- ----------------- - ---- -----------------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ----------------------
-----------
-------- --------------- ------------------
------------- ---------------
---------- -
-
-------- ------------------
--------- -----------------
------ ----
-
--
---------- --------------
--
------ ----- --------- --总结
在 Angular 中，HTTP Interceptor 是处理 http 请求中错误的一种常用机制。通过实现 HttpInterceptor 接口，我们可以拦截所有的 http 请求和响应，并处理其中的错误。在 catchError 操作符中，我们可以根据错误类型来处理错误。最后，我们需要将 HTTP Interceptor 提供给 Angular 的 HttpClient，以便使用它来处理 http 请求中的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6512d39395b1f8cacdb5465f