Angular 4中的长轮询

Nic*_*las 7 long-polling typescript angular

我需要做API调用来显示某些内容的进度.

我创建了一个服务,每1.5秒执行一次

主要部分

private getProgress() {
        this.progressService.getExportProgress(this.type, this.details.RequestID);
    }
Run Code Online (Sandbox Code Playgroud)

Services.ts

public getExportProgress(type: string, requestId: string) {
    Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .subscribe(
        (data) => {
            if (!data.InProgress)
                //Stop doing this api call
        },
        error => this.handleError(error));
}
Run Code Online (Sandbox Code Playgroud)

这个电话有效,但它一直在继续.我想在进度结束时停止进行API调用(if (!data.InProgress)但我仍然坚持这一点.

我怎样才能正确地取消订阅这个可观察的时间if (!data.InProgress)

谢谢

byg*_*ace 13

你可以使用takeWhile运营商.

以下是文档:http: //reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

只要每个值满足给定的谓词,就会发出源Observable发出的值,然后在不满足此谓词时立即完成.

以下是一个通用示例:https: //rxviz.com/v/yOE6Z5JA

Rx.Observable
  .interval(100)
  .takeWhile(x => x < 10)
  .subscribe(x => { console.log(x); });
Run Code Online (Sandbox Code Playgroud)

以下是您的代码示例:

public getExportProgress(type: string, requestId: string) {
    Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .takeWhile((data) => data.InProgress)
        .subscribe(
        (data) => {
            ...
        },
        error => this.handleError(error));
}
Run Code Online (Sandbox Code Playgroud)