web-dev-qa-db-ja.com

ロングポーリングAngular 4

何かの進行状況を表示するには、API呼び出しを行う必要があります。

1.5秒ごとにこれを行うサービスを作成しました

主成分

_private getProgress() {
        this.progressService.getExportProgress(this.type, this.details.RequestID);
    }
_

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));
}
_

呼び出しは機能しますが、続行します。進行が終了したら（_if (!data.InProgress_）API呼び出しの実行を停止したいのですが、これで行き詰まります。

if (!data.InProgress)の場合、どうすればこのobservableから正しくサブスクライブを解除できますか？

ありがとう

angulartypescriptlong-polling
7
Nicolas

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); });

コードの例を次に示します。

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));
}
13
bygrace

これを解決するには、サービス呼び出しを変数に入れ、完了したらその変数のサブスクライブを解除します。

結果は次のとおりです。

public getExportProgress(type: string, requestId: string): any {
    let progress = Observable.interval(1500)
        .switchMap(() => this.http.get(this.apiEndpoint + "Definition/" + type + "/Progress/" + requestId))
        .map((data) => data.json().Data)
        .subscribe(
        (data) => {              
            if (!data.InProgress) {
                this.toastyCommunicationService.addSuccesResponseToast("done");
                progress.unsubscribe();
            }            
        },
        error => this.handleError(error));
}
4
Nicolas