在 RxJS 中，takeWhile 和 takeUntil 操作符是用于控制 Observable 流的两个常用操作符。这两个操作符可以帮助我们在 Observable 流中筛选出我们需要的数据，从而实现更加精细的数据流控制。
takeWhile 操作符
takeWhile 操作符可以帮助我们在 Observable 流中，只取满足某个条件的数据，一旦遇到不满足条件的数据，就停止取数据。
takeWhile 操作符的使用方式如下：
source$.pipe( takeWhile((value, index) => value < 5) );
上述代码中，source$ 是一个 Observable 对象，takeWhile 操作符会对 source$ 进行筛选，只取满足条件 value < 5 的数据，一旦取到不满足条件的数据，就停止取数据。
takeUntil 操作符
takeUntil 操作符可以帮助我们在 Observable 流中，只取某个 Observable 流发出的数据之前的数据，一旦遇到该 Observable 流发出数据，就停止取数据。
takeUntil 操作符的使用方式如下：
source$.pipe( takeUntil(stop$) );
上述代码中，source$ 是一个 Observable 对象，stop$ 是另一个 Observable 对象，takeUntil 操作符会对 source$ 进行筛选，只取 stop$ 发出数据之前的数据，一旦 stop$ 发出数据，就停止取数据。
示例代码
下面是一个完整的示例代码，用于演示 takeWhile 和 takeUntil 操作符的使用：
-- -------------------- ---- ------- ------ - --------- ----- - ---- ------- ------ - ---------- --------- - ---- ----------------- ----- -------- - --------------- ----- -------- - ------------ -- --------- ----- -------------- ----------------- ------ -- ----- - -- ------------- ----- ----- -- ----------------------- ----------- --------- -- -- ---------------------- ---------- --- -- --------- ----- -------------- ------------------- ------------- ----- ----- -- ----------------------- ----------- --------- -- -- ---------------------- ---------- ---
上述代码中，我们创建了两个 Observable 对象 source1$ 和 source2$，分别用于演示 takeWhile 和 takeUntil 操作符的使用。在 takeWhile 操作符示例中，我们使用了 takeWhile 操作符，只取满足条件 value < 5 的数据，并在取完所有数据后输出 'takeWhile complete'。在 takeUntil 操作符示例中，我们使用了 takeUntil 操作符，只取 source2$ 发出数据之前的数据，并在取完所有数据后输出 'takeUntil complete'。
总结
通过本文的介绍，我们了解了 RxJS 中的 takeWhile 和 takeUntil 操作符的使用方式。这两个操作符可以帮助我们在 Observable 流中筛选出我们需要的数据，从而实现更加精细的数据流控制。在实际开发中，我们可以根据具体的需求，灵活运用这两个操作符，从而实现更加高效的数据流控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662bda68d3423812e4959aa9