RxJS 操作符大全之错误处理篇-JavaScript中文网-JavaScript教程资源分享门户

在使用 RxJS 进行前端开发时，错误处理是非常重要的一个方面。在 RxJS 中，提供了多种操作符用于处理错误，本篇文章将会详细介绍这些操作符，并提供一些示例代码。

catchError

catchError 操作符用于捕获 Observable 中的错误，并返回一个新的 Observable。在新的 Observable 中，可以对错误进行处理，也可以返回一个默认值或者其他的 Observable。

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

const source$ = of('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'a', 'b', 'c', 'd', 'e');

const result$ = source$.pipe(
  map((value: string) => parseInt(value)),
  catchError(() => of(-1))
);

result$.subscribe((value: number) => console.log(value));

在上面的示例中，source$ 是一个包含数字和字母的 Observable，通过 map 操作符将字符串转化为数字。如果转化失败，就会触发错误，此时 catchError 操作符会捕获错误并返回一个新的 Observable，新的 Observable 中的值为 -1。

retry

retry 操作符用于在出现错误时，重新尝试执行 Observable。可以设置尝试的次数，也可以设置出现错误后的延迟时间。

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

const source$ = interval(1000).pipe(
  map(() => {
    const random = Math.random();
    if (random < 0.5) {
      throw new Error('Random number is less than 0.5');
    }
    return random;
  }),
  retry(3)
);

source$.subscribe(
  (value: number) => console.log(value),
  (error: Error) => console.log(error.message)
);

在上面的示例中，source$ 会每秒钟发出一个随机数，如果随机数小于 0.5，就会触发错误。retry 操作符会在错误发生时重新尝试执行 Observable，最多尝试 3 次。

retryWhen

retryWhen 操作符与 retry 操作符类似，不同的是 retryWhen 操作符可以根据错误类型进行不同的处理，例如延迟重试、使用不同的 Observable 等。

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

const source$ = interval(1000).pipe(
  map(() => {
    const random = Math.random();
    if (random < 0.5) {
      throw new Error('Random number is less than 0.5');
    }
    return random;
  }),
  retryWhen(errors$ => errors$.pipe(switchMap(() => of(null))))
);

source$.subscribe(
  (value: number) => console.log(value),
  (error: Error) => console.log(error.message)
);

在上面的示例中，source$ 会每秒钟发出一个随机数，如果随机数小于 0.5，就会触发错误。retryWhen 操作符会在错误发生时重新尝试执行 Observable，但是这里并没有设置重试次数，而是通过 switchMap 操作符将错误转化为一个新的 Observable，该 Observable 永远不会发出任何值。

throwIfEmpty

throwIfEmpty 操作符用于检查 Observable 是否为空，如果为空就抛出错误。

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

const source$ = of().pipe(delay(1000), throwIfEmpty(() => new Error('Observable is empty')));

source$.subscribe(
  () => console.log('This will not be called'),
  (error: Error) => console.log(error.message)
);

在上面的示例中，source$ 是一个空的 Observable，通过 delay 操作符延迟 1 秒钟后，使用 throwIfEmpty 操作符检查 Observable 是否为空，如果为空就抛出错误。

finalize

finalize 操作符用于在 Observable 完成时，执行一些清理工作，例如释放资源等。

import { fromEvent } from 'rxjs';
import { finalize } from 'rxjs/operators';

const button = document.getElementById('button');

const subscription = fromEvent(button, 'click').subscribe(() => console.log('Button clicked'));

subscription.pipe(finalize(() => console.log('Subscription completed'))).subscribe();

在上面的示例中，subscription 是一个 Observable，通过 fromEvent 操作符将按钮的点击事件转化为 Observable。在 subscription 完成时，使用 finalize 操作符执行一些清理工作，例如输出一条消息。

总结

在 RxJS 中，错误处理是非常重要的一个方面。在本篇文章中，我们介绍了多种错误处理的操作符，并提供了一些示例代码。通过学习这些操作符，你可以更好地掌握 RxJS，提高前端开发的效率和质量。

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