在前端开发中，RxJS 是一个非常有用的工具，在实现响应式编程时，RxJS 可以使你的代码更为简洁易读。然而，在真实的应用场景中，我们不可避免的会遇到错误。这时候，如何有效地捕捉和处理错误，就成为了一个重要的问题。
RxJS 提供了 catchError 操作符，用来处理 Observable 中的错误。在本文中，我们将详细地介绍 catchError 操作符的用法，并通过示例代码来说明。
catchError 操作符的语法
catchError 操作符的语法如下：
source$.pipe( catchError(error => errorHandler(error)) );
其中，source$ 表示需要进行捕获错误处理的 Observable 对象。catchError 接受一个函数 errorHandler，该函数用来处理捕获到的错误。catchError 其实返回一个新的 Observable，它会接收被错误捕获之后的数据。
catchError 操作符的用法
捕获单个错误
在实际应用中，我们有时需要仅仅捕捉单条错误。比如，我们通过一个 API 请求数据，但该 API 返回了一个错误。此时，我们就可使用 catchError 操作符：
-- -------------------- ---- -------
------------------
------
---------------- -- -
---------------------- -------
------ -------
--
-
-----------
-------- -- --------------------
----- -- -------------------
--上述代码中，of([]) 用来返回一个空数组。这就保证了，即使 API 返回了错误，我们最终也可以看到请求成功的提示。
使用 throwError 操作符
有时候，在一个 Observable 中发生错误，我们需要该 Observable 直接抛出错误。在 RxJS 中，我们可以使用 throwError 操作符。
from(apiRequest())
.pipe(
catchError(error => throwError(error)),
)
.subscribe(
response => console.log('请求成功'),
error => console.log('请求失败')
);上述代码中，当 catchError 方法执行时，它会拦截捕获到的错误，并通过 throwError 操作符抛出该错误。此时，被 catchError 方法所处理的 Observable 会立即结束并进入错误处理状态。
捕获错误并重试
在有些场景下，当一个错误发生时，我们可以通过重试操作来尝试解决问题。比如，在一个 Websocket 连接中，当连接意外中断时，我们可能会需要重试以确保连接成功。
RxJS 中，我们可以使用 retry 操作符来执行重试。需要注意的是，retry 操作符会使得被处理的 Observable 无限地进行重试，因此，需要设置重试最大次数和重试间隔。
下面是一个示例代码：
-- -------------------- ---- -------
----- ----- - ---- -- --- --------------- -- ------------------- -------
----- ----------------- - -- -- -
------ --------------------------------------
---------------- -- -
------------------- ----------
------ --------------------------------------
--
--
--
------------------------------
-------- -- ----------------------
----- -- -------------------
--上述代码中，当 connectWebsocket$() 操作返回一个错误时，我们进行了捕获并打印了错误。然后，我们又构造了一个新的 Observable，并通过 delay 操作符设置了一个 1 秒的延迟后再执行递归调用。
这样，我们就可以重试多次连接操作，并通过 catchError 来捕获因连接失败而抛出的错误。
总结
在前端应用中，错误是合法的行为，我们不能一味地忽视它。而使用 catchError 操作符则可以帮助我们更加优雅地处理错误。
本文中，我们介绍了如何使用 catchError 操作符来捕获和处理错误，包括使用 throwError 操作符和 retry 操作符。务必在实际应用中多多实践，以提高代码的健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afead248841e9894c240ec