RxJS 中的 SkipUntil 和 TakeUntil 操作符
RxJS 是一个非常流行的处理异步数据的库。它使用可观察序列的概念来处理数据流，并提供许多操作符来处理这些序列。本文将重点介绍 RxJS 中的 SkipUntil 和 TakeUntil 操作符。
SkipUntil 操作符
SkipUntil 操作符可以将一个可观察序列跳过，直到另一个可观察序列发出了一个通知。这个通知可以是一个值，也可以是一个错误或完成指令。在接收到该通知之后，SkipUntil 操作符会开始发出原始序列的值。
下面是 SkipUntil 操作符的语法：
observable1.skipUntil(observable2)
其中，observable1 是要被跳过的序列，observable2 是要监听的序列。当 observable2 发出通知时，observable1 开始发出值。
以下是一个示例：
// javascriptcn.com 代码示例
import { interval } from 'rxjs';
import { skipUntil } from 'rxjs/operators';
// 创建一个可观察序列，每隔一秒钟发出一个值
const source = interval(1000);
// 创建一个可观察序列，2 秒钟后发出一个值
const notifier = interval(2000);
// 跳过 source 序列中的前两个值
const result = source.pipe(skipUntil(notifier));
// 订阅 result 序列
result.subscribe(x => console.log(x));在上面的示例中，SkipUntil 操作符将源序列 source 跳过了其前两个值，并在 notifier 序列发出通知后开始发出值。
TakeUntil 操作符
TakeUntil 操作符与 SkipUntil 操作符类似，但是它只取原始序列的值，直到另一个可观察序列发出一个通知。接收到该通知后，TakeUntil 操作符将立即完成。
下面是 TakeUntil 操作符的语法：
observable1.takeUntil(observable2)
其中，observable1 是要取值的序列，observable2 是要监听的序列。当 observable2 发出通知时，observable1 将立即完成。
以下是一个示例：
// javascriptcn.com 代码示例
import { interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
// 创建一个可观察序列，每隔一秒钟发出一个值
const source = interval(1000);
// 创建一个可观察序列，5 秒钟后发出一个值
const notifier = interval(5000);
// 取 source 序列中的前五个值
const result = source.pipe(takeUntil(notifier));
// 订阅 result 序列
result.subscribe(x => console.log(x));在上面的示例中，TakeUntil 操作符只发出了源序列 source 的前五个值，并在 notifier 序列发出通知后立即完成。
这两个操作符结合起来，可以非常方便地处理异步数据。例如，可以监听用户的鼠标点击事件，以及一个超时事件，如果超时没有到来，则只处理点击数据，否则直接完成操作。
总结
本文介绍了 RxJS 中的 SkipUntil 和 TakeUntil 操作符。这两个操作符可以让我们在处理异步数据时更加灵活和方便。SkipUntil 操作符可以跳过一个序列，直到另一个序列发出通知；TakeUntil 操作符可以在另一个序列发出通知时立即完成。通过灵活使用这两个操作符，可以让我们处理异步数据的代码更加简洁和可读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6539debd7d4982a6eb37a066