RxJS 是一个强大的 JavaScript 库，它提供了一种函数式编程风格来处理异步数据流。RxJS 的核心是 Observable，它可以把异步数据流看作是一个可观察对象。RxJS 还提供了许多操作符来处理 Observable，其中 catchError() 是一个非常有用的操作符，本文将详细介绍它的使用方法。
catchError() 方法简介
catchError() 操作符用于捕获 Observable 的错误，并返回一个备用 Observable 或者一个错误对象。它的语法如下：
catchError<T, R>(selector: (err: any, caught: Observable<T>) => ObservableInput<R>): OperatorFunction<T, T | R>
catchError() 接收一个函数作为参数，这个函数接收两个参数：错误对象和当前 Observable。函数的返回值可以是一个 Observable 或者一个错误对象。这个函数返回的 Observable 将会替换原始的 Observable，如果返回一个错误对象，则会抛出这个错误。
catchError() 方法的使用
catchError() 的使用非常灵活，可以根据具体的场景来决定如何处理错误。下面是一些 catchError() 的使用示例。
示例 1：捕获错误并返回备用 Observable
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ---------- - ---- ----------------- ----- ---------- - ----- -- -------- ----- -- - - --- ---------------- -- ---------- -- ---------------------- ----- ----- -- ------------------- ------ ----- -- --------------------- --------- -- -- ----------------------- ---
上面的代码中，我们创建了一个 Observable，它发出了三个数字并将它们乘以 2。然后我们使用 catchError() 操作符来捕获错误，并返回一个备用 Observable，这个备用 Observable 只包含一个错误对象。
如果原始 Observable 发生了错误，catchError() 会返回备用 Observable，这个备用 Observable 会发出一个错误对象。如果原始 Observable 没有发生错误，catchError() 会返回原始 Observable。
示例 2：捕获错误并返回指定的备用 Observable
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---------- - ---- -----------------
----- ---------- - ----- -- --------
----- -- - - ---
---------------- -- -
-- ------ --- -------- -
------ ------ -------------
- ---- -
----- ------
-
--
--
----------------------
----- ----- -- -------------------
------ ----- -- ---------------------
--------- -- -- -----------------------
---上面的代码中，我们创建了一个 Observable，它发出了三个数字并将它们乘以 2。然后我们使用 catchError() 操作符来捕获错误，并返回一个备用 Observable，如果原始 Observable 发生了指定的错误，则返回指定的备用 Observable，否则抛出错误。
如果原始 Observable 发生了指定的错误，catchError() 会返回备用 Observable，这个备用 Observable 会发出指定的值。如果原始 Observable 发生了其他错误，catchError() 会抛出这个错误。
示例 3：捕获错误并返回一个新的 Observable
-- -------------------- ---- -------
------ - --- ---------- - ---- -------
------ - ---------- - ---- -----------------
----- ---------- - ----- -- --------
----- -- - - ---
---------- -- -
-- -- --- -- -
------ --------------------
- ---- -
------ ------
-
---
---------------- -- ------ -------------
--
----------------------
----- ----- -- -------------------
------ ----- -- ---------------------
--------- -- -- -----------------------
---上面的代码中，我们创建了一个 Observable，它发出了三个数字并将它们乘以 2。然后我们使用 mergeMap() 操作符将数字转换成 Observable，如果数字等于 4，则抛出一个错误，否则返回一个新的 Observable。最后我们使用 catchError() 操作符来捕获错误，并返回一个备用 Observable。
如果原始 Observable 发生了错误，catchError() 会返回备用 Observable，这个备用 Observable 会发出指定的值。如果原始 Observable 没有发生错误，catchError() 会返回原始 Observable。
总结
catchError() 操作符是 RxJS 中非常有用的一个操作符，它可以用来捕获 Observable 的错误，并返回一个备用 Observable 或者一个错误对象。在使用 catchError() 的时候，需要根据具体的场景来决定如何处理错误。通过本文的介绍，相信大家已经对 catchError() 的使用有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66376003d3423812e45880d4