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

Question

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

据我所知,takeWhile()在获取数据后生效.然后取消订阅直到组件被销毁.

什么是使用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();
}

我如何确定如果我成功取消订阅？

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.

另一方面,使用a 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和处理流的想法.

现在,为了确保取消订阅某些内容,您可以使用subscribe的第三个参数:

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