RxJS Observables，何时取消订阅？答案

【问题标题】：RxJS Observables, when to unsubscibe?RxJS Observables，何时取消订阅？
【发布时间】：2017-08-24 09:40:56
【问题描述】：

我有几个关于 Angular 的问题。我最近开始尝试使用 Angular 并且真的无法掌握何时应该取消订阅，显然建议使用 AsyncPipe 但在某些情况下无法使用它。

如果我在服务中订阅 HTTP 请求，Observable 是自行取消订阅还是在整个应用程序生命周期内保持不变？
当我订阅（没有 AsyncPipe）组件中的 HTTP 请求时，我可以在 ngOnDestroy 生命周期挂钩中手动取消订阅，这很好，但在我的情况下，我有一个提交方法来创建帐户

account.component.html

<account-item>
 *ngFor="let account of collection$"
 [data]="account"
</account-item>

account.component.ts

public collection$: Observable<Account[]>;
private subscription: Subscription;

 constructor(
  private service: AccountService
 ) {}

 ngOnInit() {
   this.collection$ = this.service.getAll()
 }

 createAccount(obj) {
  this.subscription = this.service.create(obj)
   .subscribe(
    success => this.collection$ = this.service.getAll(),
    error => Observable.throw(error)
  );
}

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

据我所知，订阅现在是持久的，直到我的 AccountComponent 被销毁，但是有没有办法在此处使用 AsyncPipe 或者在服务本身中订阅对我来说更好？

我读过一些关于有限和无限 Observables 的文章，但并没有真正理解什么时候 Observable 是有限的。

我面临的另一个问题是，在success => this.collection$ = this.service.getAll() 中，当我使用ChangeDetectionStrategy.OnPush 时，我的用户界面不会随着新帐户列表更新，但在ChangeDetectionStrategy.Default 下工作得很好

这是获取帐户数据的服务方法

 getAll() {
  return this.http.get(ENDPOINT_ACCOUNT)
    .map((response: Response) => response.json().data)
}

【问题讨论】：

Angular2/RxJs When should I unsubscribe from `Subscription`的可能重复
不要担心取消订阅 http 请求 -> 这些是有限的，因为您发出一个请求，然后返回数据，仅此而已。无限订阅将是例如订阅用户输入。你也不必提供错误功能 -> 你可以简单地删除这一行。
@echonax 哦，是的，还没有看到那个，看起来它很好地解释了我的问题的有限和无限部分。
@charlie_pl 所以如果我想订阅我的 http 请求，Angular 会处理订阅，在我收到响应后还剩下什么？

标签： angularjs angular rxjs angular2-observables angular4

【解决方案1】：

在更全球化地处理 Observables 和函数式编程时，您需要考虑的是，您不描述事情是如何完成的，而是描述事情是什么。

在您的示例中，您的集合一方面是从服务中获取的初始数据，另一方面是可能发生的所有更新，因此如果您想避免在组件中订阅，您可以这样做一件事：

class Foo {
  public collection$: Observable < Account[] > ;
  private createAccount$ = new Subject<Account>();

  constructor(
    private service: AccountService
  ) {}

  ngOnInit() {
    let initialAccounts = this.service.getAll().share();
    let accountUpdate = initialAccounts.switchMap(()=>this.createAccount$.switchMap(account=>{
      return this.service.create(account).switchMap(()=>this.service.getAll())
    }))
    this.collection$ = Observable.merge(initialAccounts,accountUpdate);
  }

  createAccount(obj:Account) {
    this.createAccount$.next(obj);
  }

}

我们在这里使用merge 运算符从initialAccounts 或createAccount$ 获取数据。将您的可观察对象组合在一起并订阅一次总是一件好事，因为这样您就不必强制管理您的订阅。

事实上大多数时候，你根本不需要subscribe()。

【讨论】：