1. 前言
RxJS（Reactive Extensions for JavaScript）是一个采用响应式编程的 JavaScript 库。通过使用 RxJS，我们可以在应对异步事件时获得更优雅的解决方案。RxJS 提供了一系列的操作符，可以方便地处理事件序列和数据流，其中 retryWhen 和 catch 两个操作符是处理错误的利器。
本篇文章将详细介绍 RxJS 中 retryWhen 和 catch 操作符的区别和实践应用场景，旨在帮助读者更好地理解并掌握这两个操作符。
2. retryWhen 和 catch 的区别
2.1 retryWhen
retryWhen 操作符用于在源 Observable 发出错误后，触发一个“重试”的行为，让 Observable 重新执行。我们可以传入一个返回 Observable 的回调函数，让这个回调函数根据情况来确定是否需要继续执行源 Observable，减少了传统的 try-catch 的大面积重复代码。
2.1.1 基本语法
observable.retryWhen(notifier: (errors: Observable) => Observable): Observable
其中的 notifier 是一个回调函数，errors 是一个 Observable，它用于发出源 Observable 的全部错误。notifier 用于生成一个 Observable，以重新执行源 Observable。如果 notifier 发出一个 completed 或者 error 通知，则不会继续重新执行源 Observable。
2.1.2 示例代码
-- -------------------- ---- -------
------ - --- ---------- - ---- -------
------ - ------ ---------- --- - ---- -----------------
----- ------ - ------- ---- ---- ----------
--------- -- -
-- ---- --- ---- -
----- --- ---------- -- --- ----------
-
----------------------- -----------
---
------------------ -- -
------ ------------
--------- -- ------------------- ----------
-----------
--
--
--
------------------
----- ----- -- --------------------- ---------
------ ------- -- --------------------- -----------
--------- -- -- --------------------------
---
---
- -----
- ---------- ---
- -------- -
- ---------- ---
- -------- -
- ---------- ---
- ------ ------ --- -- --- -------
- ------ ------ --- -- --- -------
- ------ ------ --- -- --- -------
--在上面的示例中，我们创建了一个 source Observable，其中的 tap 操作符用于模拟在处理 'C' 事件时引发的错误。在 retryWhen 中，我们创建了一个 notifier Observable，并使用 delay 操作符来让源 Observable 延迟 1 秒钟重试。最终，retryWhen 使 Observable 重新执行，直到达到最大次数。
2.2 catch
catch 操作符用于拦截 Observable 发出的错误，可以返回一个备选 Observable 或值，以替换错误的 Observable。不同于 retryWhen，catch 不会让 Observable 重新执行。
2.2.1 基本语法
observable.catch(handler: (err: any, caught: Observable) => Observable): Observable
其中的 handler 是一个回调函数，err 是一个错误对象，caught 是源 Observable。handler 用于返回一个 Observable，以替换源 Observable。
2.2.2 示例代码
-- -------------------- ---- -------
------ - --- ---------- - ---- -------
------ - ---------- - ---- -----------------
----- ------ - ---------------- -- -- ---------
------
------------------------ ------- -- ---------- -- ----------
------------
----- ----- -- ------------------ ---------
------ ------- -- --------------------- -----------
--------- -- -- --------------------------
---
---
- -----
- ----- ------ -- ------
- ----------
--在上面的示例中，我们创建了一个 throwError Observable，其会引发未处理错误。在 pipe 中，我们使用 catchError 操作符捕获错误并返回一个 of Observable 替换源 Observable。
3. 实践应用场景
3.1 retryWhen 的应用
3.1.1 与网络请求相关的场景
在网络请求中，在出现网络异常的情况下，我们可以通过 retryWhen 操作符让网络请求重新发生。通常情况下，我们需要定义一个最大重试次数。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- - ---- ------------
------ - ------ ---- ---------- --- - ---- -----------------
----- ----------- - --
---------------------
------
-------------- -- -------------------
------------------ --
------------
--------- -- ------------------- ----------
------------
----------- ------ -- -
-- ------ -- ------------ -
----- ------
-
------ ----- - --
--
-
-
-
------------
----- ----- -- --------------------- ---------
------ ------- -- --------------------- -----------
--------- -- -- --------------------------
---在上面的示例中，我们在 ajax 请求中使用了 retryWhen 操作符。我们限定了最大重试次数，防止程序进入死循环。在 retryWhen 中，我们使用 tap 得到错误日志，并通过 delay 使得每次重试间隔 1 秒钟。最终，我们使用 map 和 throw 操作符来决定是否重新执行 Observable。
3.1.2 与定时任务相关的场景
在定时任务中，我们需要对执行任务过程中的错误信号进行处理，并且规避因为错误导致任务未完成的风险。
-- -------------------- ---- -------
------ - --------- --- ---------- - ---- -------
------ - ------ ---------- --- - ---- -----------------
----- ------- - --
--------------
------
------ -- -------------------------
------------
------ -- --------------------- -- ----------
------------
------ -- -
----- --- --------- ----- ------------
---
------------------ --
------------
----------- -- ------------------- ------------
------------
------------------ -- ------------------------ ---------------
-
-
-
------------
----- ----- -- --------------------- ---------
------ ------- -- --------------------- -----------
--------- -- -- --------------------------
---在上面的示例中，我们创建了一个 interval Observable 来执行定时任务。在任务执行过程中，我们使用了 retryWhen 操作符，以重试时限制次数为 INTERVALS_COUNT。当遇到超时的情况时，我们需要设置延迟任务的时间间隔，并对出现的异常显式处理。
3.2 catchError 的应用
3.2.1 与资源请求相关的场景
在请求资源中，我们需要处理可能出现的网络异常。在 catchError 操作符的帮助下，我们可以返回一个默认值并继续后续逻辑，通过该操作符我们也可以处理逆向操作及异常拦截操作。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- - ---- ------------
------ - ----------- --- - ---- -----------------
-----------------
------
-------------- -- -------------------
------------------ -- -
------------------- -----------
------ -------
--
-
------------
----- ----- -- --------------------- ---------
------ ------- -- --------------------- -----------
--------- -- -- --------------------------
---在上面的示例中，我们可以看到 catchError 操作符中我们捕获了 ajax 返回的错误并打印了错误日志，同时返回了一个默认值。
3.2.2 与响应式表单相关的场景
在响应式表单中，我们可以通过管道操作符、控件对象带的自带方法，实现对表单字段的动态校验，如果校验不通过，使用该操作符拦截错误即可。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ----------- - ---- -----------------
------ - ----------- --- - ---- -----------------
----- ----------- - --- ----------------
------------------------
------
----------- -- -
-- ---------------- -
----- --- ------------- -- ------------
-
------ -------------
---
------------------ -- -
------------------- -----------
------ ---------
--
-
----------------- -- ------------------ -----------在上面的示例中，我们创建了一个 nameControl 控件，并绑定了我们使用 catchError 操作符处理的 valueChanges 事件。如果传入的字符全是空格，就会抛出一个错误，我们可以使用 catchError 操作符对异常进行处理，并返回一个默认值继续执行后续逻辑。
4. 总结
通过本文的介绍，我们了解了 RxJS 中 retryWhen 和 catchError 操作符的区别和实践应用场景，通常的使用方式为限定重试次数并考虑错误处理返回题，合理选取合适的操作符可以帮助我们在实际项目中更加优雅地处理异常逻辑，从而保证程序的稳定性。我们希望读者可以在实际项目中积极尝试并优化实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648317c748841e9894281722