在前端应用中，错误处理是十分重要的一部分，RxJS 也不例外。在 RxJS 中，使用 catchError 运算符能够捕获错误并进行处理，确保系统的稳定性和可靠性。
catchError 运算符的作用
catchError 运算符是 RxJS 中用于错误处理的一种运算符，主要用于捕获 Observable 执行中的错误，并返回一个备用的 Observable。
当被 catchError 运算符捕获到错误时，它会将错误作为参数传递给错误处理函数，然后返回一个备用的 Observable，并继续向下传递。这样即使出现了错误，也不会中断整个 Observable 执行流程，从而保证了应用的稳定性。
使用 catchError 运算符
使用 catchError 运算符可以在 Observable 执行时捕获错误并进行处理。为了方便演示，下面使用 RxJS 的 of 和 throwError 函数来创建两个 Observable。
-- -------------------- ---- ------- ------ - --- ---------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------- - ----------- -------- ------------------ ------- ----- ------- - ------------- ---------------- -- ----------------------------- -- ----------------------- -- --------------------
在上面的例子中，source$ 中会抛出一个错误，这时候使用 catchError 运算符捕获这个错误，并返回一个备用的 Observable。输出结果如下：
Hello World 错误信息:出错了 Bye
详解 catchError 运算符
catchError 运算符的参数可以是一个错误处理函数（Function），也可以是一个备用的 Observable；也可以结合 throwError 运算符来抛出错误。
使用错误处理函数
当 catchError 运算符的参数是一个错误处理函数时，它会在出现错误时调用该函数，并将错误作为参数传入该函数。
-- -------------------- ---- ------- ------ - --- ---------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------- - ----- -- -- ------------------ --- ----- ------- - ------------- ---------------- -- ----------------------------- -- ----------------------- -- --------------------
在上面的例子中，output$ 使用 catchError 运算符捕获了 source$ 中的错误，并返回了一个备用的 Observable。输出结果如下：
1 2 3 错误信息:出错了
使用备用的 Observable
当 catchError 运算符的参数是一个备用的 Observable 时，它会在出现错误时立刻停止当前 Observable 的执行，并将备用的 Observable 作为新的输出 Observable 向下传递。
-- -------------------- ---- ------- ------ - --- ---------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------- - ----- -- -- ------------------ --- ----- ------- - ----------- ----- ------- - ------------- ------------- -- --------- -- ----------------------- -- --------------------
在上面的例子中，当 source$ 中出现错误时，使用 catchError 运算符停止当前 Observable 的执行并返回备用的 Observable。输出结果如下：
1 2 3 备份数据
throwError 运算符抛出错误
结合 catchError 运算符和 throwError 运算符，可以在 catchError 中抛出错误并进行处理。
-- -------------------- ---- ------- ------ - --- ---------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------- - ----- -- -- --- ----- ------- - ------------- ---------------- -- ------------------------------------- -- ----------------------- -- --------------------
在上面的例子中，使用 catchError 运算符捕获了错误，并使用 throwError 运算符将错误重新抛出进行处理。输出结果如下：
1 2 3 4
总结
catchError 运算符是 RxJS 中的一个重要的运算符，它可以很方便地捕获 Observable 执行中的错误，并进行处理。在前端应用中，错误处理尤为重要，使用 catchError 运算符可以保证应用的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec3280f6b2d6eab367688c