RxJS 中的操作符：takeUntil 和 takeWhile 的使用-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个强大的 JavaScript 库，它提供了一组操作符，用于处理异步数据流。其中，takeUntil 和 takeWhile 操作符是两个非常有用的操作符，它们可以帮助我们更好地控制数据流。

takeUntil 操作符

takeUntil 操作符接收一个 Observable，并返回一个新的 Observable，该新 Observable 会一直发出原始 Observable 的数据，直到另一个 Observable 发出值。一旦另一个 Observable 发出值，新 Observable 就会立即完成。

takeUntil 操作符的语法如下：

source$.pipe(takeUntil(notifier$));

其中，source$ 是原始 Observable，notifier$ 是另一个 Observable。

下面是一个示例代码，演示了 takeUntil 操作符的使用：

import { interval, timer } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const source$ = interval(1000);
const notifier$ = timer(5000);

source$.pipe(takeUntil(notifier$)).subscribe(value => {
  console.log(value);
});

在上面的示例代码中，我们创建了一个每秒发出一个值的 Observable（source$），并创建了一个 5 秒后发出值的 Observable（notifier$）。我们使用 takeUntil 操作符将 source$ 和 notifier$ 连接起来，并订阅新的 Observable。在订阅期间，source$ 会一直发出值，直到 notifier$ 发出值，此时新 Observable 会立即完成。

takeWhile 操作符

takeWhile 操作符接收一个断言函数，并返回一个新的 Observable，该新 Observable 会一直发出原始 Observable 的数据，直到断言函数返回 false。一旦断言函数返回 false，新 Observable 就会立即完成。

takeWhile 操作符的语法如下：

source$.pipe(takeWhile(predicate));

其中，source$ 是原始 Observable，predicate 是一个断言函数。

下面是一个示例代码，演示了 takeWhile 操作符的使用：

import { interval } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

const source$ = interval(1000);

source$.pipe(takeWhile(value => value < 5)).subscribe(value => {
  console.log(value);
});

在上面的示例代码中，我们创建了一个每秒发出一个值的 Observable（source$），并使用 takeWhile 操作符将其连接起来。我们将断言函数设置为 value => value < 5，这意味着只要值小于 5，新 Observable 就会继续发出值。一旦值大于或等于 5，新 Observable 就会立即完成。

总结

在本文中，我们介绍了 RxJS 中的 takeUntil 和 takeWhile 操作符，并演示了它们的使用。这两个操作符可以帮助我们更好地控制数据流，避免不必要的内存泄漏和资源浪费。如果你正在处理异步数据流，并且希望更好地控制数据流，那么 takeUntil 和 takeWhile 操作符是非常有用的工具。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e5a56eb4cecbf2d424f9c