rxjs Observable：處理取消訂閱所有訂閱

Question

我有一個返回Observable的方法

subFoo(id): Observable<number> {
    return new Observable<number>(observer => {
        setTimeout(() => {
            observer.next(id);
        }, 1000);
    });
}

現在我訂閱了三次，並在5秒后取消訂閱全部：

const sub1 = subFoo(1).subscribe(result => console.log(result));
const sub2 = subFoo(2).subscribe(result => console.log(result));
const sub3 = subFoo(3).subscribe(result => console.log(result));

setTimeout(() => {
  sub1.unsubscribe();
  sub2.unsubscribe();
  sub3.unsubscribe();
}, 5000);

我可以處理所有列表的完整unsubscrite？

例如。 （偽代碼）：

subFoo(id): Observable<number> {
    return new Observable<number>(observer => {

        // something like this
        observer.onAllListenerAreUnsubscribed(() => {
           console.log('All Listener Are Unsubscribed!');
        });

        setTimeout(() => {
            observer.next(id);
        }, 1000);
    });
}

現場演示： https ： //stackblitz.com/edit/angular-ayl12r

Answer 1

Observable可以了解其鏈的訂閱。 如果您希望能夠告訴某人訂閱了多少次，您可以自己計算：

let subscriptions = 0;

subFoo(id): Observable<number> {
  return new Observable<number>(observer => {
    subscriptions++;
    ...
    return (() => {
      if (--subscriptions === 0) {
        // do whatever...
      }
      ...
    })
  })
})

您還可以將“觀察者側”的所有訂閱收集到一個訂閱中，然后在取消訂閱時添加自定義處理程序：

const subs = new Subscription();
subs.add(subFoo(1).subscribe(...));
subs.add(subFoo(2).subscribe(...));
subs.add(subFoo(3).subscribe(...));
subs.add(() => {
  // do whatever...
});

subs.unsubscribe(); // Will unsubscribe all subscriptions and then call your custom method.

Answer 2

您可以在一行中取消訂閱所有偵聽器，因此無需處理該事件

subscriptions.add(sub1).add(sub2).add(sub3);

// Then unsubscribe all of them with a single 
subscriptions.unsubscribe();

Answer 3

通過一次完成所有可觀測量，您確信不會有任何數據泄漏。 您可以創建一個主題，一旦觀察者應該停止發射並在您的observables上使用takeUntil（）運算符就會發出，如下所示：

const completeSubscription: Subject<void> = new Subject();

const sub1 = subFoo(1)
  .pipe(takeUntil(completeSubscription))
  .subscribe(result => console.log(result));
const sub2 = subFoo(2)
  .pipe(takeUntil(completeSubscription))
  .subscribe(result => console.log(result));
const sub3 = subFoo(3)
  .pipe(takeUntil(completeSubscription))
  .subscribe(result => console.log(result));

setTimeout(() => {
  completeSubscription.next();
  completeSubscription.complete();
}, 5000);