RxJS 是一个强大的响应式编程库，它提供了许多操作符来方便我们处理数据流。本文将重点介绍 delayWhen、timeoutWith 和 retryWhen 这三个操作符的使用方法。
delayWhen
delayWhen 操作符可以让我们将数据流延迟一定的时间后再进行处理。它接收一个回调函数作为参数，该回调函数会根据源 Observable 发出的每个元素返回一个 Observable，这个 Observable 决定了延迟的时间。
下面是一个示例：
import { fromEvent, interval } from 'rxjs';
import { delayWhen } from 'rxjs/operators';
const button = document.querySelector('button');
const clicks = fromEvent(button, 'click');
const delayedClicks = clicks.pipe(delayWhen(() => interval(1000)));
delayedClicks.subscribe(() => console.log('Delayed click!'));在上面的代码中，我们创建了一个 clicks 的源 Observable，并用 delayWhen 操作符将每个点击事件延迟 1 秒后再进行处理。这样，当用户点击按钮时，不会立即触发点击事件的处理函数，而是在 1 秒后才执行。
timeoutWith
timeoutWith 操作符可以让我们设置一个超时时间，如果源 Observable 在超时时间内没发出任何元素，就会触发一个备选 Observable。
下面是一个示例：
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ----------- - ---- ----------------- ----- ------ - --------------- ----- ------- - ----------------------------- ---------------- ------------------ --- -- ------------------- --------- --- -- ------------------- --------- -- -- ------------------------ --
在上面的代码中，我们创建了一个每秒发出一个整数的源 Observable，并用 timeoutWith 操作符设置了一个 2 秒的超时时间和一个备选 Observable，备选 Observable 会在源 Observable 超时时被触发。这样，当源 Observable 在 2 秒内没有发出任何元素时，备选 Observable 就会被触发并继续发出元素。
retryWhen
retryWhen 操作符可以让我们在源 Observable 抛出错误时，重新订阅该 Observable 并进行处理。它接收一个回调函数作为参数，该回调函数会根据源 Observable 抛出的错误返回一个 Observable，Observable 的发出值将触发重新订阅源 Observable。
下面是一个示例：
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - ---- ---------- ----- - ---- -----------------
----- ------ - ------------------------- -- -
-- -- --- -- -
----- --- ---------------- ---- ---------
-
------ --
----
----- ------- - ------------
---------------- -- -------------------------
--
------------------
--- -- ------------------- ---------
--- -- ------------------- ---------
-- -- ------------------------
--在上面的代码中，我们创建了一个每秒发出一个整数的源 Observable，并用 map 操作符将第三个数设置为错误，然后用 retryWhen 重复订阅源 Observable，超时 1 秒钟。这样，当源 Observable 抛出错误时，它将重新订阅并在 1 秒钟后继续发出元素。
总结
delayWhen、timeoutWith 和 retryWhen 都是 RxJS 中非常实用的操作符，可以帮助我们方便地处理数据流。在使用这些操作符时，记得根据具体情况进行调整，以确保代码的正确性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af894a48841e9894b98786