Angular2和RXJS,在收到一次数据后取消订阅

时间:2016-11-28 15:32:57

标签: angular rxjs

我有一个订阅调用,只需要接收一次数据。 它开启的Angular 2页面长期运行。

我想确保订阅在第一次收到数据后不会导致内存泄漏和取消订阅的任何问题。

这是我的api查询服务。它使用.first,因此一旦收到数据就应该清理它。

getData(): Observable<string> {
    let _url = SOME_API_URL;
    return this._http.get(_url).first().map((response: Response) => { return response.json(); });
}

这是我的Ng2订阅。我是否需要做任何事情,确保在收到第一个()数据后清理所有内容?

this._service.getData().subscribe((data: any) => {
    // Do something once.
    // DO I HAVE TO UNSUBSCRIBE OR WILL THE CLEANUP HAPPEN DUE TO THE ABOVE FIRST() CALL?
});

我可以使用ngDestory,但由于页面长时间运行而且不经常刷新,因此不会被调用。

1 个答案:

答案 0 :(得分:7)

first不会为您订阅Observable

例如,如果你这样做:

Rx
  .Observable
  .of(1, 2, 3)
  .first()
  .map(x => console.log(x))
<script src="https://npmcdn.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js"></script>

什么都没发生。

所以,你需要 subscribe 到那个Observable ...谁说 subscribe说你需要unsubscribe从它自己

let subscription = Rx
  .Observable
  .of(1, 2, 3)
  .first()
  .map(x => console.log(x))
  .subscribe(
    (success) => {},
    (error) => {},
    (done) => { console.log('unsubscribe') }
  );

subscription.unsubscribe();
<script src="https://npmcdn.com/rxjs@5.0.0-beta.7/bundles/Rx.umd.js"></script>

只需将subscription保存在您的某个类变量中并实现onDestroy方法:

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

修改1:

为了更清楚:

如果您浏览first(),则会按预期取消订阅。

但是,假设您的观察结果需要很长时间,并且您决定移动到应用中的其他位置,并且组件会被破坏。观察者将保持活力(至少在它收到一个值之前)。

因此,在取消订阅observable之前,您仍应保留ngOnDestroy方法,以防组件被销毁。