RxJS 中的 catchError 操作符：什么是它以及如何使用它

RxJS 是一个强大的 JavaScript 库，用于处理异步数据流。RxJS 提供了多种操作符，其中 catchError 操作符可以用来处理异步操作中出现的错误。本文将介绍 catchError 操作符的作用、用法以及示例代码。

catchError 操作符的作用

catchError 操作符用于处理异步操作中出现的错误。在 RxJS 中，当一个 Observable 发送错误时，它将停止发送并将错误传递给订阅它的观察者。catchError 操作符则可以捕获错误，并在错误发生时采取适当的措施，比如返回一个默认值或者转换为新的 Observable。使用 catchError 操作符可以使你的应用程序更加健壮，可以更好地处理错误情况。

catchError 操作符的用法

catchError 操作符有两种用法：一种是处理单个错误，另一种是处理多个错误。

处理单个错误

当你只需要处理单个错误时，可以使用 catchError 操作符捕获错误并返回一个默认值。在下面的示例中，我们使用 catchError 操作符来处理从 API 获取数据时发生的错误，并返回空数组作为默认值。

const { ajax } = rxjs.ajax;
const { catchError } = rxjs.operators;

ajax('/api/data')
  .pipe(
    catchError(error => {
      console.error(error);
      return of([]);
    })
  )
  .subscribe(data => console.log(data));

在这个示例中，我们的 ajax 请求失败了，将会打印出错误信息并返回一个空数组。

处理多个错误

当你需要处理多个错误时，可以使用 catch 操作符来捕获多个错误。在下面的示例中，我们使用 catch 操作符来捕获来自多个 Observables 的错误，并返回一个默认值。

const { fromEvent } = rxjs;
const { catchError } = rxjs.operators;

const clicksObservable = fromEvent(document, 'click');
const mousemoveObservable = fromEvent(document, 'mousemove');

clicksObservable
  .pipe(
    catchError(error => {
      console.error('clicks error', error);
      return mousemoveObservable.pipe(catchError(error => {
        console.error('mousemove error', error);
        return of({ x: 0, y: 0 });
      }));
    })
  )
  .subscribe(event => console.log(event));

在这个示例中，我们订阅了两个 Observables：clicksObservable 和 mousemoveObservable。当 clicksObservable 发送错误时，我们将 catchError 操作符应用于它，并返回 mousemoveObservable。当 mousemoveObservable 也发送错误时，我们将再次使用 catchError 操作符处理错误，并返回一个默认值。最终，我们将得到一个正确的数据流来处理。

总结

catchError 操作符是一个十分有用的异步操作符。它可以帮助我们更好地处理异步操作中出现的错误，在应用程序中增加健壮性。使用 catchError 操作符时，我们可以处理单个错误或者多个错误。无论你需要处理多少个错误，catchError 操作符都可以帮助你实现这一目标。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a62645add4f0e0ffed5c5f