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