当 Subject 发出特定值时，使用 RXJS 取消订阅

Question

我认为我应该将 RXJS 用于特定的用例。用例是我有一个订阅，我想一直到其他地方的主题发出某个值为止。

例如：

// The sub to unsub when a certain <value> is emitted from a Subject elsewhere.
this.someObservable.subscribe(() => ...)


// Somewhere in the code far, far away, this should kill the subscription(s) that cares about <value>
this.kill.next(<value>)

我处理这个问题的方法是缓存订阅，然后在调用this.kill.next(<value>) 和相关的<value> 时取消订阅。不过，这是命令式的方法，感觉可以通过takeWhile 或其他类似技术做得更好。也许我可能需要将someObservable 与kill 主题合并？

如何利用 RXJS 来处理这个问题？

Answer 1

takeUntil 是你想要的运算符

this.someObservable.pipe(
  takeUntil(this.kill.pipe(filter(val => val === killValue)))
).subscribe(() => ...)

一旦 kill observable 发出 killValue ，它将通过过滤器并发出到取消订阅流的 takeUntil。

const { timer, fromEvent, Subject } = rxjs;

const { takeUntil, filter } = rxjs.operators;

const kill$ = new Subject();

kill$.subscribe(val => {
  console.log(val);
});

timer(500, 500).pipe(
  takeUntil(kill$.pipe(filter(val => val === 'kill')))
).subscribe(val => {
  console.log(val);
});

document.getElementById('rnd').addEventListener('click', () => {
  kill$.next(Math.random());
});

document.getElementById('kill').addEventListener('click', () => {
  kill$.next('kill');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.2/rxjs.umd.min.js"></script>
<button id="rnd">Emit random</button>
<button id="kill">Emit kill</button>