取消一个 Rx Observable 间隔调用答案

【问题标题】：Cancel an Rx Observable interval call取消一个 Rx Observable 间隔调用
【发布时间】：2016-11-15 00:06:45
【问题描述】：

我是 Angular 2 的新手，所以这可能是微不足道的 - 我试图弄清楚如何取消每 2 秒发生一次的 Rx.Observable 间隔调用。我用这个订阅了 Rx.Observable：

getTrainingStatusUpdates() {
    this.trainingService.getLatestTrainingStatus('train/status')
        .subscribe(res => {
            this.trainingStatus = res;
            if (this.trainingStatus == "COMPLETED") {
                //Training is complete
                //Stop getting updates
            }
        });
}

这就是我在 service.ts 文件中处理 Rx.Observable 间隔调用的方式（这是由上面的函数从不同的文件调用的）：

getLatestTrainingStatus(url: string) {
    return Rx.Observable
        .interval(2000)
        .flatMap(() => this._http.get(url))
        .map(<Response>(response) => {
            return response.text()
        });
}

正如您在订阅方法中看到的，我只想在“trainingStatus”为“COMPLETED”时停止间隔调用（每 2 秒）。

【问题讨论】：

标签： javascript angularjs typescript angular

【解决方案1】：

getTrainingStatusUpdates() {
  this.trainingService.getLatestTrainingStatus('train/status')
  .do(res => this.trainingStatus = res)
  .first(res => res == "COMPLETED")
  .subscribe(/* Do stuff, if any */);
}

您不必取消订阅/停止间隔。当res == "COMPLETED"时会停止

【讨论】：

【解决方案2】：

取消订阅选项可以做到这一点。

每个 .subscribe() 返回一个订阅对象。这个对象允许你取消订阅底层的 Observable。

getTrainingStatusUpdates() {
    // here we are assigning the subsribe to a local variable
    let subscription = this.trainingService.getLatestTrainingStatus('train/status')
        .subscribe(res => {
            this.trainingStatus = res;
            if (this.trainingStatus == "COMPLETED") {
                //this will cancel the subscription to the observable
                subscription.unsubscribe()
            }
        });
}

【讨论】：