随着 Ajax 技术的发展，我们越来越依赖前端与后端之间的数据交互。而 HTTP 请求是前后端交互的重要方式。不过，即使我们的网络连接良好，也难免会遇到 HTTP 请求错误，例如网络连接失败、服务器错误等。对于前端开发人员来说，如何优雅地处理 HTTP 请求错误，是一项非常重要的技能。在 RxJS 框架中，我们可以利用其强大的操作符来处理 HTTP 请求错误，本文将为大家介绍 RxJS 中处理 HTTP 请求错误的正确姿势。
1. 错误处理的重要性
HTTP 请求在前后端交互中扮演着非常重要的角色，服务器端无法处理请求时，需要及时地给出错误提示，前端需要对这些错误进行及时的处理。遇到错误时，如果我们没有处理方式，那么可能会导致应用程序 crash，给用户带来不良的使用体验。因此，我们必须针对 HTTP 请求的错误做出及时的反应和处理，例如在 UI 上展现相应的错误提示信息，或者跳转到相应的错误页面。
2. HTTP 请求错误处理的传统方式
在传统的 JavaScript 开发中，我们通常使用 Promise 或者回调函数来处理 HTTP 请求的错误。例如，当我们使用 fetch 发送请求时，我们可以通过 Promise.catch 方法来捕获错误。
fetch('http://www.example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))在使用 Promise.catch 或者回调函数处理错误的方式中，我们需要在处理错误时掌握好错误传递的机制，这在多层嵌套中会变得非常复杂。此外，错误处理的流程和代码显得比较冗长，不太利于代码的后续维护和管理。
3. RxJS 中的错误处理
在 RxJS 中，错误处理是通过操作符 throwError 和 catchError 实现的。throwError 操作符主要用于在 Observable 里抛出一个指定的错误。而 catchError 操作符用于捕获错误，并向下传递一个新的 Observable 序列。我们可以根据这个新的 Observable 序列，来控制错误的展示信息或者进行重新请求等操作。
-- -------------------- ---- -------
------ - ----------- -- - ---- -------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -----------------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- -
------ -----------------------
------
---------------- -- -
------------------ ----- -------- -------
-- ---------
------ ------------------
-- -------- ---------- --
-- ------ -------
--
--
-
-上面的代码片段中，我们使用了 HttpClient 发送了一个 /users 的 HTTP 请求。在 catchError 操作符中，我们通过 console.error 打印了一个错误信息，并通过 throwError 操作符抛出了原有的错误。当然，我们也可以选择返回一个新的 Observable 序列来代替原有的错误，实现替代处理。
4. 多种错误处理方式
在 RxJS 框架中，有多种错误处理方式可以供我们选择，例如 retry、retryWhen 和 catch 等方法。下面简要介绍这几种具有指导意义的错误处理方法。
(1) retry 操作符
retry 操作符会在发生错误时重新发送 Observable 序列。我们可以设置 retry 操作符的尝试次数，来控制在错误发生后需要进行多少次重试才能终止请求。例如，我们设置重试 3 次：
-- -------------------- ---- -------
------ - ----------- -- - ---- -------
------ - ------ ---------- - ---- -----------------
------ - ---------- - ---- -----------------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- -
------ -----------------------
------
---------
---------------- -- -
------------------ ----- -------- -------
------ ------------------
--
--
-
-(2) retryWhen 操作符
类似于 retry 操作符，retryWhen 操作符也会在发生错误时重新发送 Observable 序列。不同的是，retryWhen 操作符还可以自定义一个条件，根据这个条件来控制重新发送序列的时机。例如，我们需要在 5 秒后重试：
-- -------------------- ---- -------
------ - ----------- --- ----- - ---- -------
------ - ---------- ---------- ---- ---------- - ---- -----------------
------ - ---------- - ---- -----------------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- -
------ -----------------------
------
---------------- -- -
------ ------------
-- ----- ----
------------ -- -------------
------- -- -
-- -------
----------------------- -----
--
--
---
---------------- -- -
------------------ ----- -------- -------
------ ------------------
--
--
-
-(3) catch 操作符
catch 操作符用于捕获错误，并返回一个 Observable 序列。与 throwError 操作符不同，catch 操作符不会中断序列的执行，只是返回一个新的序列。例如，我们可以将错误信息统一打印出来，并返回一个空序列：
-- -------------------- ---- -------
------ - ----------- -- - ---- -------
------ - ---------- - ---- -----------------
------ - ---------- - ---- -----------------------
------ ----- ----------- -
------------------- ----- ----------- --
---------- -
------ -----------------------
------
---------------- -- -
------------------ ----- -------- -------
------ -------
--
--
-
-5. 总结
HTTP 请求的错误处理是前端开发中非常关键的一环，我们需要及时地捕捉和处理错误信息，以便给用户带来更好的使用体验。在 RxJS 中，我们可以使用 throwError 和 catchError 等操作符来处理 HTTP 请求错误。此外，还有 retry、retryWhen 和 catch 等多种操作符可以选择，可以根据实际需求进行不同的选择。总之，RxJS 提供给我们非常强大和灵活的工具，我们需要在使用中不断探索和深入学习，才能更好地运用 RxJS 来处理 HTTP 请求错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6522282695b1f8cacd98deeb