在前端开发中，有很多接口请求需要进行重试，例如网络不稳定时，请求失败率较高。RxJS 是近年来前端界非常热门的框架，在处理异步流程方面表现出色。那么我们如何利用 RxJS 实现重试逻辑呢？
Retry
RxJS 中提供了 retry 操作符来实现重试逻辑，它会在发生错误时重新订阅源 Observable。例如：
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------ --------- ----- - ---- ----------------- ------------------- ----------- -- --------------------- ------------ -------- ------------ --- -- ----------------- --- -- ------------------ --
在上述代码中，源 Observable 是 of，我们使用 mergeMap 创建一个新 Observable，它会在 1 秒钟后抛出一个错误，之后我们使用 retry(3) 操作符来代替重试逻辑，表示当错误发生时重新订阅源 Observable，最多重试 3 次。
CatchError 和 RetryWhen
RxJS 中提供了 catchError 操作符让我们能够处理每次重试时的错误，例如：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ----------- --------- --------- - ---- -----------------
-------------------
----------- -- ---------------------
---------------- --
------------
-------------- -- -- - - - - ------------------------- - ----------------
-
--
-------------- -- ----------- - ----- --- ------- ---------
------------
--- -- -----------------
--- -- ------------------
--在上述代码中，我们使用 retryWhen 来处理重试逻辑，源 Observable 和 mergeMap 的用法与之前示例中一样，不同的是我们使用 mergeMap 把错误转换为它本身并延迟 1 秒钟，重试 3 次。最后我们使用 catchError 操作符来处理重试达到上限后的错误。
代码实现
最后让我们实现一个自定义的 RetryWithBackoff 操作符，它是一个带有指数退避的重试逻辑，以便根据错误类型和重试次数进行更精细的控制。代码实现如下：
-- -------------------- ---- -------
------ - ----------- --- ---------- - ---- -------
------ - ------ --------- ---------- ---- - ---- -----------------
-------- -------------------------- ------------- ------------- -
--- ----- - --
------ -------- -- -
------ ------------
-------------- -- -
-- -------- -- --------- -
------ ------------------
-
----- ----------- - ------------ - ------ - -- - -------------
------ -----------------------------------
--
--
--
-
-------- ------------ -
------ ------------- - --- - -------------------- - --------------
-
------------------
----------------------------- ----- -------
-------
------------
--- -- -----------------
--- -- ------------------
--在上述代码中，我们定义了一个 retryWithBackoff 函数来创建一个 RetryWithBackoff 操作符。它接受最大重试次数、初始延迟和退避延迟三个参数，返回的是一个可处理错误并进行异步重试的操作符函数。例如，在上述代码中我们调用 retryWithBackoff(5, 1000, 2000) 来限制重试次数最多为 5 次，并且在第一次重试后延迟 1 秒钟，之后退避延迟为 2 秒钟。
我们定义了一个 requestApi 函数来模拟请求 API，每次请求有 50% 的概率失败，之后我们使用 retryWhen 运算符并传入 RetryWithBackoff 操作符来进行异步重试。最后我们使用 take(1) 限制只订阅一次。
总结
RxJS 提供了 retry、catchError 和 retryWhen 操作符来支持重试逻辑，并提供了能够自定义重试策略的能力。在这篇文章中，我们讨论了如何利用 RxJS 实现重试逻辑，并且提供了示例代码和自定义操作符的实现，希望能够对使用 RxJS 处理异步流程的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b9e4fbadd4f0e0ff26fc8c