在使用 RxJS 进行前端开发时，错误处理是非常重要的一个方面。在 RxJS 中，提供了多种操作符用于处理错误，本篇文章将会详细介绍这些操作符，并提供一些示例代码。
catchError
catchError 操作符用于捕获 Observable 中的错误，并返回一个新的 Observable。在新的 Observable 中，可以对错误进行处理，也可以返回一个默认值或者其他的 Observable。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------- - ------- ---- ---- ---- ---- ---- ---- ---- ---- ----- ---- ---- ---- ---- ----- ----- ------- - ------------- ----------- ------- -- ----------------- ------------- -- ------- -- ------------------------- ------- -- --------------------
在上面的示例中，source$ 是一个包含数字和字母的 Observable，通过 map 操作符将字符串转化为数字。如果转化失败，就会触发错误，此时 catchError 操作符会捕获错误并返回一个新的 Observable，新的 Observable 中的值为 -1。
retry
retry 操作符用于在出现错误时，重新尝试执行 Observable。可以设置尝试的次数，也可以设置出现错误后的延迟时间。
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ---- ----- - ---- -----------------
----- ------- - --------------------
------ -- -
----- ------ - --------------
-- ------- - ---- -
----- --- ------------- ------ -- ---- ---- ------
-
------ -------
---
--------
--
------------------
------- ------- -- -------------------
------- ------ -- --------------------------
--在上面的示例中，source$ 会每秒钟发出一个随机数，如果随机数小于 0.5，就会触发错误。retry 操作符会在错误发生时重新尝试执行 Observable，最多尝试 3 次。
retryWhen
retryWhen 操作符与 retry 操作符类似，不同的是 retryWhen 操作符可以根据错误类型进行不同的处理，例如延迟重试、使用不同的 Observable 等。
-- -------------------- ---- -------
------ - --------- -- - ---- -------
------ - ---- ---------- --------- - ---- -----------------
----- ------- - --------------------
------ -- -
----- ------ - --------------
-- ------- - ---- -
----- --- ------------- ------ -- ---- ---- ------
-
------ -------
---
----------------- -- ------------------------- -- -----------
--
------------------
------- ------- -- -------------------
------- ------ -- --------------------------
--在上面的示例中，source$ 会每秒钟发出一个随机数，如果随机数小于 0.5，就会触发错误。retryWhen 操作符会在错误发生时重新尝试执行 Observable，但是这里并没有设置重试次数，而是通过 switchMap 操作符将错误转化为一个新的 Observable，该 Observable 永远不会发出任何值。
throwIfEmpty
throwIfEmpty 操作符用于检查 Observable 是否为空，如果为空就抛出错误。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------ ------------ - ---- ----------------- ----- ------- - ---------------------- --------------- -- --- ----------------- -- ---------- ------------------ -- -- ----------------- ---- --- -- --------- ------- ------ -- -------------------------- --
在上面的示例中，source$ 是一个空的 Observable，通过 delay 操作符延迟 1 秒钟后，使用 throwIfEmpty 操作符检查 Observable 是否为空，如果为空就抛出错误。
finalize
finalize 操作符用于在 Observable 完成时，执行一些清理工作，例如释放资源等。
import { fromEvent } from 'rxjs';
import { finalize } from 'rxjs/operators';
const button = document.getElementById('button');
const subscription = fromEvent(button, 'click').subscribe(() => console.log('Button clicked'));
subscription.pipe(finalize(() => console.log('Subscription completed'))).subscribe();在上面的示例中，subscription 是一个 Observable，通过 fromEvent 操作符将按钮的点击事件转化为 Observable。在 subscription 完成时，使用 finalize 操作符执行一些清理工作，例如输出一条消息。
总结
在 RxJS 中，错误处理是非常重要的一个方面。在本篇文章中，我们介绍了多种错误处理的操作符，并提供了一些示例代码。通过学习这些操作符，你可以更好地掌握 RxJS，提高前端开发的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655d625bd2f5e1655d7a3e88