为了更好地处理异步数据流，RxJS 是一个非常实用的 JavaScript 库，它提供了丰富的操作符来操作数据。然而，在 RxJS 6 中，一个值得注意的变化是，有一个操作符的名称从 catch 更改为了 catchError。
这个改名造成了很多人的困惑，也带来了一些使用错误。这是因为旧版本中的 catch 操作符是用于捕捉错误的，而且它的用法是有点奇怪的。然而，在 RxJS 6 中，catch 已被更名为 catchError ，并且有了更加常规化的使用方式。
catch 和 catchError 的区别
在 RxJS 的旧版本中，catch 操作符可以让你从上游 Observable 接收到错误，并返回一个新的 Observable，而不是一个错误。这意味着您需要剔除错误，以避免中断流的处理。
-- -------------------- ---- -------
------------------------- -------- ----------
--------- -- -
-- ----- --- ---------- -
----- --- ---------- -----------
-
------ -----
--
------------ ------- -- -
------ ------------
------------------------ -------
-
--
-----------------------上面的例子中，显然是遇到 goodbye 就会抛出错误，然后通过 catch 操作符捕获异常，并返回一个只有一个值的 Observable。在这个新的 Observable 中，您可以打印错误消息，然后继续下一个处理。
然而，在 RxJS 6 中，如果您使用 catch 操作符，您将会受到一个错误：
-- -------------------- ---- -------
------------------------- -------- ----------
-------------- -- -
-- ----- --- ---------- -
----- --- ---------- -----------
-
------ -----
---
----------- ------- -- -
------ ------------
------------------------ -------
-
---
-----------------------这段代码将会抛出一个错误告诉你 "TypeError: _operator.catch is not a function"。
解决办法就是使用正确的操作符：catchError。
正确使用 catchError 操作符
在新版本的 RxJS 中，catchError 操作符仍然可以让你从上游 Observable 接收错误。然而，与 catch 相比，它采用更加常规化的方式。
-- -------------------- ---- -------
------------------------- -------- ----------
-------------- -- -
-- ----- --- ---------- -
----- --- ---------- -----------
-
------ -----
---
---------------- ------- -- -
------ ------------
------------------------ -------
-
---
-----------------------如您所见，catchError 操作符引入了一个新的参数，该参数是错误对象。我们可以在这里编写逻辑，以选择从哪里接受下一个 Observable。
在这个例子中，我们将错误消息捕获并返回一个新的 Observable。在这个新的 Observable 中，您可以打印错误消息，然后继续下一个处理。
总结
到这里，你应该明白 catch 和 catchError 操作符的不同之处，并学会了正确使用最新版本的 catchError 操作符来处理错误。记住使用catchError 操作符，可以让你更加规范地处理异步数据流，并让你的代码变得更加容易理解。
在您的代码中，请务必使用 RxJS 6，以便能够正确地处理 Observable！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ba98148841e989486fb46