Angular 4 - 取消订阅的最佳方式 [英] Angular 4 - Best way of unsubscribing

问题描述

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

<块引用>

据我了解，takeWhile()在我们拿到数据后生效.然后取消订阅，直到组件被销毁.

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

不使用 takeUntil()

ngOnInit() {this.subscriptions = this._membersService.getMembers().subscribe(data =>this.members = 数据)}ngOnDestroy() {this.subscriptions.unsubscribe();}

使用 takeUntil

私有销毁$:主题<{}>= 新主题()；ngOnInit() {this._membersService.getMembers().takeUntil(this.destroyed$).subscribe(data=>this.members = 数据)}ngOnDestroy() {this.destroyed$.next();}

<块引用>

还有如何判断是否成功退订?

解决方案

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

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

私人订阅1:订阅；私人订阅2:订阅；私人订阅3:订阅；私人订阅4:订阅；私人订阅5:订阅；私人订阅6:订阅；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();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('流已经完成'));

如果您不喜欢在 subscribe 方法中添加任何内容，您可以这样做:

this.service.method().takeUntil(this.onDestroy$).做({完成 =>console.log('流已经完成')}).订阅();

<小时>

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

I am curious on how am I suppose to unsubscribe all my subscriptions. I knew about the takeWhile() and takeUntil(). I find the takeUntil() more usable for me.

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

Whats is the difference of using takeUntil() and not using it. just .unsubscribe()?

without using takeUntil()

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

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

using 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?

解决方案

The main difference is the way of thinking... and the boilerplate.

Without takeUntil, when your file will grow in size and lines of code, you might end up with something like that:

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();
}

Or, you might declare an array of subscriptions and push into it.

Both doesn't seem to be very handy and if you end up with many methods, containing subscriptions, you won't be able to see whether they're being unsubscribed or not if you don't scroll to the ngOnDestroy.

On the other hand, using a Subject is much more readable:

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();
}

Even if subscriptions are divided across the whole file, you can just check whether takeUntil(this.onDestroy$) is present or not.

It's also closer to the idea of Rxjs and dealing with streams.

---

Now, to make sure something is being unsubscribed, you can just use the third argument of subscribe:

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

If you don't like to put anything into the subscribe method, you could do that:

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

---

If you want to go further down the subject, you should read this excellent article by Ben Lesh: https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87

这篇关于Angular 4 - 取消订阅的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！