发布于 2年前

RxJs——takeUntil

今天我们继续学习takeUntil运算符。

我们知道take运算符是主要是限制发送一定次数的值之后就结束发送;按照这样的思路,我们猜想,这个takeUntil也是发送一定的值之后应该结束,那么具体是什么呢?

它将值从源 observable 传递给观察者,直到提供的称为通知 observable 发出其第一个值。它订阅源Observable,然后会监测源Observable;它还订阅了可观察的通知Observable。如果通知Observable发出一个值,则 takeUntil 取消订阅源Observable和通知Observable并完成。如果通知Observable没有发出任何值并完成,则 takeUntil 将传递所有值。

<figure class="image"></figure>从上面的图可以看出:

1、订阅源和通知者可观察对象

2、当一个新值从一个源 observable 到达时,将它发送给观察者

3、如果通知 observable 发出一个值,取消订阅两个 observable,将完整的通知发送给观察者

4、一旦源 observable 完成,将完成通知发送给观察者

5、如果源 observable 抛出错误,则向观察者发送错误通知

使用举例:

onst stream = interval(1000);

function component(source) {
   const notifier = new Subject();

   source.pipe(
       takeUntil(notifier)
   ).subscribe(render);

   return () => {
       notifier.next(null);
   };
}

const destroy = component(stream);

setTimeout(destroy, 3000);

function render(v) {
   const text = document.createTextNode(v);
   document.body.appendChild(text);
}

总结:

1、这个操作符其实就是满足一定条件的情况下结束整个Observable

2、这个操作符一般用于实现subject;

©2020 edoou.com   京ICP备16001874号-3