在 Angular 应用程序中，HTTP 请求和响应管理是处理网络通信的重要组成部分。但是，由于网络环境复杂多变，API 接口设计上的问题以及其他不可控的因素，HTTP 请求和响应中难免会出现一些错误。为了提高用户体验和应用程序健壮性，我们需要对这些错误进行处理。
本文介绍了 Angular 应用程序中的 HTTP 错误处理，在这里我们将学习到如何检测 HTTP 请求和响应中的错误类型，以及如何通过使用 Angular 提供的 HTTP 拦截器在应用程序内全局集中处理 HTTP 错误。
HTTP 错误类型
在 Angular 应用程序中，HTTP 错误类型通常分为两种: 客户端错误和服务端错误。
客户端错误
客户端错误通常是由于用户在请求时输入了错误的参数或者请求了无效的 API 地址等情况导致。常见的客户端错误包括:
- 400 Bad Request: 请求参数有误。
- 401 Unauthorized: 用户未提供有效的认证信息。
- 403 Forbidden: 用户没有权限访问该资源。
- 404 Not Found: 未找到请求的资源。
服务端错误
服务端错误通常是由于服务器内部出现问题或者网络通信出现问题等原因导致的。常见的服务端错误包括：
- 500 Internal Server Error: 服务器发生了未知错误。
- 502 Bad Gateway: 服务器充当网关或代理时收到了无效的响应。
- 503 Service Unavailable: 服务器过载或停机维护导致无法响应请求。
HTTP 拦截器
HTTP 拦截器是 Angular 提供的一种机制，它允许我们修改 HTTP 请求、响应以及错误处理等一系列操作。我们可以在拦截器中集中处理 HTTP 错误，实现全局统一的错误处理。
下面是一个 HTTP 拦截器的示例代码，它能够处理客户端错误和服务端错误，并将错误信息展示在应用程序中。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------------------ ---------- ------------ ---------------- ----------- - ---- -----------------------
------ - ----------- ---------- - ---- -------
------ - ---------- - ---- -----------------
------ - ----------- - ---- ------------------------------
-------------
------ ----- ---------------- ---------- --------------- -
------------------- --------- ------------ --
-------------- ----------------- ----- ------------- -------------------------- -
------ ----------------------
------------------ ------------------ -- -
--- ------------ - ----------
-- ------------ ---------- ----------- -
-- -----
------------ - ------- ------------------------
- ---- -
-- -----
------------ - ------- --------------- ---------------------
-
-------------------------------- ----- - --------- ---- ---
------ -------------------------
--
--
-
-在上面的代码中，我们实现了 HttpInterceptor 接口，并在 intercept 方法中进行了 HTTP 错误处理。具体实现逻辑如下所示:
- 我们首先通过
next.handle(req).pipe()发起 HTTP 请求，如果出现 HTTP 请求错误就会进入catchError中。 - 在
catchError中，我们针对不同的错误类型进行了处理:- 如果错误信息是
ErrorEvent类型的，那么说明是客户端错误。我们从错误对象中取出错误信息，并在应用程序中展示。 - 如果错误信息不是
ErrorEvent类型的，那么说明是服务端错误。我们从错误对象中取出错误状态码和错误原因，并在应用程序中展示。
- 如果错误信息是
最后，我们使用 throwError() 将错误信息抛出到上游的应用程序中，这样就能够实现全局展示错误信息的效果。
总结
本文介绍了 Angular 应用程序中的 HTTP 错误处理，我们首先讨论了常见的 HTTP 错误类型，然后介绍了如何使用 HTTP 拦截器来全局处理 HTTP 错误。通过本文的学习，我们可以更好地管理和处理应用程序中的 HTTP 请求和响应，提高应用程序性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66487691d3423812e47173af