javascript - 取消 Rx Observable 间隔调用

Question

我是 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 秒一次)。

Answer 1

这可以通过取消订阅选项实现。

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