本文将介绍在 Angular 应用程序中如何处理 http 请求错误。我们将讨论 http 请求可能出现的错误类型、错误处理的几种策略，以及在实际开发中的示例代码。
错误类型
http 请求可能出现以下错误类型：
- 网络错误：包括服务器无法连接、请求超时、DNS 解析失败等。
- 认证错误：请求需要进行身份验证，但是提供的凭证是无效的或者已过期。
- 服务器错误：服务器无法正确处理请求，返回了 500 系列的错误码。
- 客户端错误：请求的 URL、请求体等格式不正确，返回了 400 系列的错误码。
- 其他错误：例如跨域请求被阻止、客户端中断请求等。
错误处理策略
我们可以使用以下几种策略来处理 http 请求错误。
处理单个请求错误
在每一个 http 请求前，我们可以使用 catchError 操作符来捕获请求的可能出现的错误：
-- -------------------- ---- -------
-------------------------------
------------------ ------------------ -- -
-- ------------ ---------- ----------- -
-- --------
----------------- ----- ----------- ---------------------
- ---- -
-- ---------
---------------------- -------- ---- ---------------- ---- ---- -----------------
-
------ --------------------- --- --------- ------ --- ----- ---------
--
------------------ -- -
------------------
---在请求错误时，我们使用 console.error() 打印错误信息，并使用 throwError 操作符返回一个可观察对象，一旦订阅会抛出错误。
处理所有请求错误
我们可以创建一个 http 拦截器来处理所有的请求错误：
-- -------------------- ---- -------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- -------------------- -------------------- --
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------ ---------- ------------------ -
------ -------------- -
---- ----
-- ----
------
---- ----
-- -----
------
---- --
-- ----
------
--------
-- -----
------
-
--------------------------------------------------
------ --------------------------
-
--
--
-
-在以上代码中，我们使用 switch 语句对不同类型的错误进行判断，并使用 notificationService 发出通知。如果需要，我们还可以在这个 http 拦截器中对特定的请求进行拦截和处理。
内置错误页面
我们可以在应用中定义一个内置的错误页面，在出现请求错误时直接路由到该页面。这样可以给用户更好的错误提示和解决方案提供。在 Angular 中，我们可以使用 router.navigate 方法来实现：
-- -------------------- ---- -------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- -------------------- -------------------- ------- ------- ------- --
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------- --- ---- -
-- ----
--------------------------------
- ---- -- ------------- --- ---- -
-- -----
------------------------------
- ---- -
-- ----
------------------------------
-
------ --------------------------
--
--
-
-在以上代码中，我们在出现不同的 http 请求错误时，使用 router.navigate 方法进行路由跳转到对应的错误页面。
示例代码
在一个典型的 Angular 应用中，我们可能会遇到以下的 http 请求错误处理情况。
处理单个请求错误
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- ----------------- - ---- -----------------------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -------
------------
--------- -----------
--------- --------------
--
------ ----- ------------ -
-------- -------
------------------- ----- ----------- --
---------- -
-------------------------------------------------------------------
------------------ ------------------ -- -
-- ------------ ---------- ----------- -
-- --------
----------------- ----- ----------- ---------------------
- ---- -
-- ---------
---------------------- -------- ---- ---------------- ---- ---- -----------------
-
------ --------------------- --- --------- ------ --- ----- ---------
--
------------------ -- -
------------ - -----------
---
-
-处理所有请求错误
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------ - ---- ------------------
------ - ------------ ------------ ---------- ---------------- ----------------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
------ - ------------------- - ---- -------------------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- -------------------- -------------------- ------- ------- ------- --
------------------ ----------------- ----- ------------- -------------------------- -
------ --------------------------
------------------ ------------------ -- -
-- ------------- --- ---- -
-- ----
--------------------------------
- ---- -- ------------- --- ---- -
-- -----
------------------------------
- ---- -
-- ----
------------------------------
-
--------------------------------------------------
------ --------------------------
--
--
-
-总结
在 Angular 应用程序中处理 http 请求错误是一个必要的工作。我们可以使用 catchError 操作符和 http 拦截器来处理不同类型的 http 请求错误，并使用内置的错误页面来进行错误提示和解决方案提供。我们希望本文对你们在应用开发中的错误处理能够提供一些参考和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ff009f95b1f8cacdda8a1e