2017-10-13 17 views
4

무언가의 진행 상황을 표시하려면 API 호출이 필요합니다.Long Polling in Angular 4

나는이 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)); 
} 

호출 작업을하는 서비스를 만들었습니다,하지만가는 계속 . 진행 상황이 끝나면 API 호출을 중단하고 싶습니다 (if (!data.InProgress).

if (!data.InProgress) 일 때 어떻게이 관측 대상을 올바르게 구독 취소 할 수 있습니까?

덕분에

답변

5

당신은 takeWhile 연산자를 사용할 수 있습니다

다음은 결과입니다. http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

가 만족 지정된 조건부 각 값 것이면 관찰 가능한 소스에 의해 방출 된 값을 울리는이 술어를 만족하지 않는 것에 따라 빨리 완료 : 여기

는 문서이다.

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)); 
} 
: https://rxviz.com/v/yOE6Z5JA

다음
Rx.Observable 
    .interval(100) 
    .takeWhile(x => x < 10) 
    .subscribe(x => { console.log(x); }); 

이 당신의 코드 예입니다 : 여기

는 일반적인 예입니다
1

나는이 끝났어요 때 변수에서 변수에 서비스 호출을 가하고, 및 구독 취소하여이 문제를 해결했습니다.

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