Comment flatmap correctement trois demandes HTTP

Question

J'ai une application qui fait 3 demandes HTTP et chaque demande repose sur les informations des autres. Actuellement je fais la prochaine demande sur le succès mais c'est inefficace. Je l'ai fait quelques recherches et trouvé que je suis censé être en utilisant flatmap mais deux façons j'ai essayé ne faites pas les requêtes http à l'api

C'est ce que je l'ai essayé, mais il ne renvoie rien

return this.info.getLastRecord(this.station) 
     .map((res: any) => res.json() 
     .flatMap((info: any) => { 
     return this.info.getQueue(this.lastID) 
      .map((res: any) => { 
      console.log(res.json()); 
      }); 
     })); 

Ce travail ne marche pas non plus

return this.info.getLastRecord(this.station) 
    .map((res: any) => res.json() 
    .flatMap((res: any) => { 
    return this.info.getQueue(this.lastID) 
     .map((res: any) => { 
     console.log(res); 
    }); 
    })); 

Voici comment je fais actuellement les appels

this.getInfoService.getLastRecord(this.station) 
    .subscribe(
    (info) => { 
     console.log("res", info); 
    }, 
    (error: Response) => console.log(error), 
    () => this.getQueue() 
); 

getQueue() { 
    this.info.getQueue(this.lastID) 
    .subscribe(
    (info) => { 
     console.log("getQueue", info); 
    }, 
    (error: Response) => console.log(error), 
    () => this.gHTDG()) 
} 

getHookTypeDieGroup() { 
this.info.getHookTypeDieGroup(this.profileCode) 
    .subscribe(
    (info) => { 
     console.log("GHTDG", info); 
    }, 
    (error: Response) => console.log(error) 
); 
} 

info.service.ts

getLastRecord(station: string): any { 
return this.http.get('http://API.app/getLastRecord/' + station) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    }, 
).share(); 
} 

getQueue(lastID: number): any { 
return this.http.get('http://API.app/getQueue/' + lastID) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    } 
) 
    .share(); 
} 

gHTDG(pCode: string): any { 
return this.http.get('http://API.app/getHTDG/' + pCode) 
    .map(
    (response: Response) => { 
     return response.json().info; 
    } 
).share(); 
} 

Answer 1

Si vous en avez besoin enchaînées en séquence je pense que switchMap est l'opérateur que vous voulez. Je vais avoir du mal à suivre votre logique, mais je pense qu'il ressemblerait à quelque chose comme ceci:

this.getInfoService 
    .getLastRecord(this.station) 
    .switchMap(x => this.getQueue(x.(value from getLastRecord call))) 
    .switchMap(x => this.getHookTypeDieGroup(x.(value from getQueue call)) 
    .subscribe(x => { //Do something with final result }); 

Chaque switchMap souscrira à l'observable précédent et le nourrir est le résultat dans la fonction de la graisse de flèche qui retournera une nouvelle observable. L'abonnement sera au résultat de l'observable final.

Example can be found here.

Answer 2

Je pense que concatMap serait l'opérateur pour vous, si vous voulez exécuter les 3 demandes dans un ordre précis après avoir terminé consécutivement. exemple Foe:

getLastRecord(station: string): Observable<any> { 
return this.http.get(`http://API.app/getLastRecord/${station}`) 
    .map(response => response.json().info) 
    .catch(//handle error); 
} 

getQueue(lastID: number): Observable<any> { 
return this.http.get(`http://API.app/getQueue/${lastID}`) 
    .map(r=> r.json().info) 
    .catch(//handle error); 
} 

gHTDG(pCode: string): Observable<any> { 
return this.http.get(`http://API.app/getHTDG/${pCode}`) 
    .map(response => response.json().info); 
    .catch(//handle error) 
} 

concatenatedRequest(station: string): Observable<any>{ 
    return this.getLastRecord(station) 
.concatMap(lastRecord=> this.getQueue(lastRecord.id))//lastRecord is the result from the previous getLastRecord request 
.concatMap(queueData => this.gHTDG(queueData.pCode))//queueData is the result of the previous getQueue request 
.catch(//handle error); 
} 

Je n'ai pas essayé mais selon les documents qui devraient fonctionner: D Pour plus d'informations sur le contrôle de l'opérateur qui suit link