RxJS 中的 catchError 操作符详解-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个强大的 JavaScript 库，它提供了一种函数式的响应式编程范式，使得异步编程变得更加简单和可维护。RxJS 中的 catchError 操作符是一个非常常用的操作符，用于处理 Observable 中的错误。本文将详细介绍 catchError 操作符的用法，并给出一些示例代码，帮助读者更好地理解。

catchError 操作符的基本用法

catchError 操作符用于捕获 Observable 中的错误，并返回一个新的 Observable。如果 Observable 中没有错误，则 catchError 操作符不会做任何事情，直接将原始 Observable 传递给下游。当 Observable 中出现错误时，catchError 操作符会调用一个错误处理函数，该函数可以返回一个新的 Observable，也可以抛出一个新的错误。

catchError 操作符的基本语法如下：

catchError(handler: (err: any, caught: Observable<T>) => ObservableInput<T>): Observable<T>

其中，handler 参数是一个错误处理函数，它接收两个参数：err 和 caught。err 表示捕获到的错误对象，caught 表示原始的 Observable。

下面是一个简单的示例，演示 catchError 操作符的基本用法：

// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5);

source$.pipe(
  map(value => {
    if (value === 3) {
      throw new Error('Oops!');
    }
    return value;
  }),
  catchError(error => of('Error Occurred!'))
).subscribe(console.log);

在上面的示例中，我们创建了一个 Observable，它会发出 1、2、3、4 和 5 这些数字。我们在 map 操作符中模拟了一个错误，当值为 3 时，我们抛出了一个新的错误。然后，我们使用 catchError 操作符捕获这个错误，并返回一个包含错误信息的新的 Observable。

当我们运行这段代码时，输出结果如下：

1
2
Error Occurred!
4
5

我们可以看到，当值为 3 时，程序抛出了一个错误，然后 catchError 操作符捕获了这个错误，并返回了一个包含错误信息的新的 Observable。这个新的 Observable 发出了一个错误信息，然后程序继续执行。

catchError 操作符的高级用法

除了基本用法之外，catchError 操作符还有一些高级用法。下面我们将介绍其中的两种：使用 throwError 和使用 retry。

使用 throwError

throwError 操作符用于创建一个新的 Observable，它会立即抛出一个错误。我们可以将 throwError 和 catchError 操作符一起使用，来处理 Observable 中的错误。下面是一个示例代码：

// javascriptcn.com 代码示例
import { of, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5);

source$.pipe(
  map(value => {
    if (value === 3) {
      throw new Error('Oops!');
    }
    return value;
  }),
  catchError(error => throwError('Error Occurred!'))
).subscribe(console.log);

在上面的代码中，我们使用 throwError 操作符创建了一个新的 Observable，它会立即抛出一个错误。然后，我们使用 catchError 操作符捕获原始 Observable 中的错误，并返回一个包含错误信息的新的 Observable。当我们运行这段代码时，输出结果如下：

1
2
Error Occurred!

我们可以看到，当值为 3 时，程序抛出了一个错误，然后 catchError 操作符捕获了这个错误，并返回了一个包含错误信息的新的 Observable。这个新的 Observable 立即抛出了一个错误，程序终止。

使用 retry

retry 操作符用于在 Observable 出现错误时，重复执行 Observable，直到 Observable 不再出现错误或达到指定的重试次数。我们可以将 retry 和 catchError 操作符一起使用，来处理 Observable 中的错误。下面是一个示例代码：

// javascriptcn.com 代码示例
import { of } from 'rxjs';
import { map, catchError, retry } from 'rxjs/operators';

const source$ = of(1, 2, 3, 4, 5);

source$.pipe(
  map(value => {
    if (value === 3) {
      throw new Error('Oops!');
    }
    return value;
  }),
  retry(2),
  catchError(error => of('Error Occurred!'))
).subscribe(console.log);

在上面的代码中，我们使用 retry 操作符设置了最大重试次数为 2。当出现错误时，程序会重复执行 Observable，直到不再出现错误或达到最大重试次数。然后，我们使用 catchError 操作符捕获原始 Observable 中的错误，并返回一个包含错误信息的新的 Observable。当我们运行这段代码时，输出结果如下：

1
2
1
2
Error Occurred!

我们可以看到，当值为 3 时，程序抛出了一个错误，然后 retry 操作符重复执行了 Observable，尝试解决错误。在第二次执行时，程序成功发出了 1 和 2 这两个数字，然后 catchError 操作符捕获了这个错误，并返回了一个包含错误信息的新的 Observable。

总结

catchError 操作符是 RxJS 中一个非常常用的操作符，用于处理 Observable 中的错误。本文详细介绍了 catchError 操作符的基本用法和高级用法，希望读者能够更好地理解 RxJS 中的错误处理机制，并能够在实际开发中灵活使用 catchError 操作符。

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