在前端开发中，异步请求是一项常见的任务。然而，这些异步请求并不总能成功。当网络错误或其他问题出现时，这些请求可能会失败。这时候，我们通常会尝试重新发送这些请求，以期望最终能够成功。但是，当我们一直重试却无济于事时，我们需要一个更好的解决方案。在这种情况下，RxJS 的 RetryWhen 操作符就可以派上用场了。
RxJS 是什么？
RxJS（Reactive Extensions for JavaScript）是一个响应式编程的库。它可以将异步和基于事件的程序改写为响应式的方式，使得代码更加易于理解和维护。RxJS 是一个支持 ES6 的库，因此它可以与现代的 JavaScript 应用程序一起使用。
RetryWhen 操作符是什么？
RetryWhen 操作符是 RxJS 的一个操作符，它可以用于重新发送由 Observable 表示的异步任务。当原始任务失败时，RetryWhen 操作符会在一段时间后自动重新发送任务。这个操作符可以很方便地解决异步请求中由于网络错误等原因造成的任务失败问题。
RetryWhen 操作符的 syntax 如下：
retryWhen(notifier: (errors: Observable<any>) => Observable<any>)
参数 notifier 是一个函数，它接受一个 Observable，该 Observable 发出了一个错误信号。notifier 函数返回一个 Observable，以决定是否重新发送原始任务。当 notifier 函数返回的 Observable 发出一个信号时，RetryWhen 操作符会重新发送原始任务。
RetryWhen 操作符的示例
下面是一个使用 RetryWhen 操作符的示例。假设我们有一个 HTTP 请求，它从服务器获取数据。我们可以使用 RxJS 的 ajax 函数来发送 HTTP 请求。
-- -------------------- ---- -------
------ - ---- - ---- ------------
------ - --- ---------- - ---- -------
------ - --------- ----------- --------- - ---- -----------------
----- ------ - ------------------
----- ------- - ------------
---------------- -- ------------
---------------- ------ -- -
-- ------ - - -- ------------- --- --- -- ------------ --- ----- -
------ ----------
-
------ ------------------
--
--
--
-------------------
----- ------- -- -------------------
------ ----- -- -------------------
--------- -- -- -----------------------
---在上面的示例中，我们使用 ajax 函数发起一个 HTTP 请求。如果请求发生错误，RetryWhen 操作符会尝试重新发送请求。如果在前三次重试中出现了状态码为 408 或 500 的错误，就会继续重试。在第四次重试时，如果还是有错误出现，RetryWhen 操作符就会将错误传递给订阅者（使用 throwError）。
RetryWhen 操作符的学习和指导意义
RetryWhen 操作符是 RxJS 中十分实用的一个操作符，它能够解决异步请求中的重试错误问题。通过 RetryWhen 操作符的使用，我们可以为异步任务实现更好的错误处理机制。同时，RetryWhen 操作符还启示我们，在处理异步请求时，我们可以尝试使用响应式编程的技术。这样可以更好地处理和维护代码，以及提升应用程序的性能。
结论
RxJS 的 RetryWhen 操作符可以用于处理异步请求中的重试错误。在 RetryWhen 操作符的作用下，我们可以更好地控制异步请求的流程，并改进异步请求的错误处理机制。RxJS 的 RetryWhen 操作符为我们提供了一种更加优秀的解决方案，在实际的开发过程中，可以对异步请求中出现的问题提供更好的解决方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67028790d91dce0dc847ac30