前言
在前端开发中，经常会遇到各种错误，例如网络请求失败、服务器错误、数据格式错误等等。当这些错误发生时，我们需要对其进行处理，以便让应用程序更加健壮和可靠。在 RxJS 中，我们可以使用 retry 和 retryWhen 这两个操作符来处理错误，本文将详细介绍如何使用这两个操作符来处理错误。
retry 操作符
retry 操作符的作用是在源 Observable 发生错误时，重新订阅该 Observable，从而重新执行它。如果源 Observable 在重新订阅后仍然发生错误，则会再次重新订阅，直到达到最大重试次数或者源 Observable 成功发出值为止。
下面是一个使用 retry 操作符的示例：
import { interval } from 'rxjs';
import { map, take, retry } from 'rxjs/operators';
const source$ = interval(1000).pipe(
map((value) => {
if (value === 3) {
throw new Error('Something went wrong');
}
return value;
}),
take(5),
retry(2),
);
source$.subscribe({
next: (value) => console.log(value),
error: (error) => console.error(error),
complete: () => console.log('Complete'),
});在上面的示例中，我们创建了一个每秒发出一个数字的 Observable，当发出数字为 3 时，我们手动抛出了一个错误。然后我们使用 retry 操作符对该 Observable 进行了重新订阅，最多重试 2 次。因此，当发生错误时，该 Observable 会重新订阅两次，最终输出结果为：
0 1 2 0 1 2 0 1 2 Error: Something went wrong
retryWhen 操作符
retryWhen 操作符的作用与 retry 操作符类似，但是它允许我们在每次重新订阅时执行一些自定义的操作。使用 retryWhen 操作符时，我们需要传入一个函数，该函数会接收一个错误 Observable，我们可以在该函数中对错误 Observable 进行一些自定义操作，例如延迟重试、根据错误类型选择是否重试等等。
下面是一个使用 retryWhen 操作符的示例：
import { interval, of } from 'rxjs';
import { map, mergeMap, retryWhen, delay } from 'rxjs/operators';
const source$ = interval(1000).pipe(
mergeMap((value) => {
if (value === 3) {
return of('Something went wrong');
}
return of(value);
}),
map((value) => {
if (value === 'Something went wrong') {
throw new Error(value);
}
return value;
}),
retryWhen((errors$) =>
errors$.pipe(
delay(1000),
map((error, index) => {
if (index === 2) {
throw error;
}
return index;
}),
),
),
);
source$.subscribe({
next: (value) => console.log(value),
error: (error) => console.error(error),
complete: () => console.log('Complete'),
});在上面的示例中，我们首先使用 mergeMap 操作符将源 Observable 转换为一个返回 Observable 的 Observable。当返回的 Observable 的值为 'Something went wrong' 时，我们手动抛出了一个错误。然后我们使用 retryWhen 操作符对该 Observable 进行了重新订阅，但是我们在重新订阅之前，使用了 delay 操作符将重试操作延迟了 1 秒。此外，我们还使用了 map 操作符来控制最多重试 3 次，如果达到最大重试次数仍然发生错误，则会将错误抛出。因此，当发生错误时，该 Observable 会重新订阅 3 次，最终输出结果为：
0 1 2 0 1 2 0 1 2 Error: Something went wrong
总结
在本文中，我们介绍了如何使用 RxJS 中的 retry 和 retryWhen 操作符来处理错误。retry 操作符可以让我们在源 Observable 发生错误时重新订阅该 Observable，从而重新执行它。而 retryWhen 操作符则允许我们在每次重新订阅时执行一些自定义的操作，例如延迟重试、根据错误类型选择是否重试等等。通过学习和使用这两个操作符，我们可以更好地处理前端开发中遇到的各种错误，使我们的应用程序更加健壮和可靠。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bdc89eadd4f0e0ff7692d3