javascript - Hvordan synkronisere http.get-forespørsler i Angular, når den andre forespørselen avhenger av den første?

Jeg trenger å utføre en sekvens av HTTP-forespørsler til databasen min fra Angular. I første trinn får jeg et array med objekter. Dette fungerer fint. I et andre trinn vil jeg fylle hvert objekt med ekstra data. Så jeg må vente på at den første HTTP-forespørselen fullføres. Jeg vil heller ikke returnere før dataene mine har blitt hentet.

Min funksjon getData() bør returnere en Observable, fordi grensesnittet/signaturen ikke skal endres (da det brukes i andre deler av programmet og en observable gir mening i programlogikken).

// Returns an array with objects, that have an id, that is needed for the second call 

data[] : Object = new Array(); 
populatedData[] : Object = new Array();


getData(): Observable<Object[]>{
  this.http.get<Object[]>("http://localhost:3000/data").subscribe(data => this.data = data);

// This needs the data from the first call 
 for(int i = 0; i < data.length; i++){
this.http.get<Object>("http://localhost:3000/data/"+data[i].id).subscribe(data => populatedData.push(data)); 
}


return of(populatedData); 

}

Svar #1

Du kan bruke switchMap (etter at den første GET-forespørselen er ferdig, gjør de andre forespørslene) og forkJoin (gjør flere forespørsler og send når alle er fullført). Noe slikt:

    getSingleEntry = ({ id }) => this.http.get<Object[]>("http://localhost:3000/data/" + id);

    getData = () => this.http.get<Object[]>("http://localhost:3000/data")
        .pipe(
            tap(data => this.data = data),
            switchMap(data => forkJoin(data.map(this.getSingleEntry)));

Svar #2

Løfte er et alternativ, men et annet alternativ kan være,

// Returns an array with objects, that have an id, that is needed for the second call 
   data[] : Object = new Array(); 
   populatedData[] : Object = new Array();

  getData(): Observable<Object[]>{
     this.http.get<Object[]>("http://localhost:3000/data").subscribe((data)=>{
      this.data = data;
             for(int i = 0; i < data.length; i++){
                  this.http.get<Object>("http://localhost:3000/data/"+data[i].id).subscribe((response)=> {
                          populatedData.push(response)
                   }); 
             }
         });
      return of(populatedData); 
    }

Relaterte artikler