Angular 4 - 取消订阅的最佳方式

Question

我很好奇我应该如何取消订阅我的所有订阅。我知道 takeWhile() 和 takeUntil()。我发现 takeUntil() 对我更有用。

as far as I understand, takeWhile() take effects after we get the data. then unsubscribe until the component is destroy.

使用 takeUntil() 和不使用它的区别是什么。只是.unsubscribe()?

不使用 takeUntil()

ngOnInit() {
 this.subscriptions = this._membersService.getMembers().subscribe(data => 
 this.members = data)
}

ngOnDestroy() {
 this.subscriptions.unsubscribe();
}

使用 takeUntil

private destroyed$: Subject<{}> = new Subject();

ngOnInit() {
 this._membersService.getMembers().takeUntil(this.destroyed$).subscribe(data 
 => this.members = data)
}

ngOnDestroy() {
  this.destroyed$.next();
}

also how can I determine If I unsubscribe successfully?

Answer 1

主要区别在于思维方式...和样板文件。

如果没有 takeUntil ，当您的文件的大小和代码行数增加时，您可能会得到类似这样的结果:

private subscription1: Subscription;
private subscription2: Subscription;
private subscription3: Subscription;
private subscription4: Subscription;
private subscription5: Subscription;
private subscription6: Subscription;

ngOnInit() {
  this.subscription1 = this.service.method().subscribe(...);
  this.subscription2 = this.service.method().subscribe(...);
  this.subscription3 = this.service.method().subscribe(...);
  this.subscription4 = this.service.method().subscribe(...);
  this.subscription5 = this.service.method().subscribe(...);
  this.subscription6 = this.service.method().subscribe(...);
}

ngOnDestroy() {
  this.subscription1.unsubscribe();
  this.subscription2.unsubscribe();
  this.subscription3.unsubscribe();
  this.subscription4.unsubscribe();
  this.subscription5.unsubscribe();
  this.subscription6.unsubscribe();
}

或者，您可以声明一个订阅数组并将其推送到其中。

两者似乎都不是很方便，如果您最终有很多方法，包含订阅，如果您不滚动到 ngOnDestroy ，您将无法看到它们是否正在取消订阅。

另一方面，使用 Subject 更具可读性:

private onDestroy$ = new Subject<void>();

ngOnInit() {
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
  this.service.method().takeUntil(this.onDestroy$).subscribe(...);
}

ngOnDestroy() {
  this.onDestroy$.next();
  this.onDestroy$.complete();
}

即使订阅被划分到整个文件中，您也可以只检查 takeUntil(this.onDestroy$) 是否存在。

它也更接近于 Rxjs 的思想和处理流。

---

现在，要确保取消订阅，您可以使用订阅的第三个参数:

this.service.method().takeUntil(this.onDestroy$).subscribe(
  onNext => ...,
  onError => ...,
  onComplete => console.log('stream has been completed')
);

如果您不想在订阅方法中添加任何内容，您可以这样做:

this.service.method().takeUntil(this.onDestroy$)
.do({
  complete => console.log('stream has been completed')
})
.subscribe();

---

如果您想深入了解这个主题，您应该阅读 Ben Lesh 的这篇优秀文章:https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87