Relève longue en Angulaire 4

Question

Je dois faire des appels API pour afficher la progression de quelque chose.

J'ai créé un service qui le fait toutes les 1,5 secondes

Composant principal

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

Les travaux d'appel, mais il continue à aller . Je veux arrêter de faire l'appel de l'API quand la progression est terminée (if (!data.InProgress) mais je suis coincé dessus.

Comment puis-je me désinscrire correctement de cet observable lorsque if (!data.InProgress)?

Merci

Answer 1

Vous pouvez utiliser l'opérateur takeWhile.

Voici la documentation: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-takeWhile

Libère valeurs émises par la source Observable tant que chaque valeur satisfait le prédicat donné, puis termine dès que ce prédicat est pas satisfait.

Voici un exemple générique: https://rxviz.com/v/yOE6Z5JA

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

Voici un exemple avec votre code:

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

Answer 2

J'ai résolu ce problème en mettant l'appel de service dans une variable et désabonnement de cette variable quand je suis fait.

est ici le résultat:

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