How to make sequential service call on success of first service response in Angular

Question

I need to make multiple service call in angular one after other. need to pass the first service call respose as input to another service.

Here is my component:

 Demo(): any {
        if (fileToUpload) {
          this._voiceboxService.upload(fileToUpload)
          .subscribe((res: any) => {
            this.text=res.prediction
              console.log(res);
          });
      }
      else
          console.log("FileToUpload was null or undefined.");
    }
}

Here is my Service: i need to call all three service on success of one service and need to pass first service resposnse as input for next service

          upload(fileToUpload: any) {
            let input = new FormData();
            input.append("file", fileToUpload);
           return this.http.post<any>('https://localhost:5001/', input)
         
          language(data: any) {
           return this.http.post<any>('https://localhost:5002', data)
          }
    
        getDetails(data: any) {
           return this.http.post<any>('https://localhost:5003', data)
          }

Use `susbscribe` and call other method in the body of `subscribe` — brk, Jul 15 '21 at 05:18
`concatMap` is probably the best operator in this case. You can find inspiration in [this article](https://betterprogramming.pub/rxjs-patterns-emerging-from-stackoverflow-asynchronous-api-calls-as-streams-in-the-real-world-ef636c9af19a). — Picci, Jul 15 '21 at 07:49

score 1 · Answer 1 · answered Jul 15 '21 at 05:53

Use mergeMap. I assume you want to do this in your component:

   this._voiceboxService.upload(fileToUpload).pipe(mergeMap(upload => 
       this._voiceboxService.language(upload)
          .pipe(mergeMap(language => this._voiceboxService.getDetails(language))
   ))).subscribe((res: any) => {
        this.text=res.prediction
        console.log(res);
   });

You can use map in the end organize your final value result.

score 0 · Answer 2 · answered Jul 15 '21 at 06:07

You could use any of the RxJS higher order mapping operators like switchMap to map from one observable to another. You could find differences between different mapping operators here.

Service

upload(fileToUpload: any) {
  let input = new FormData();
  input.append("file", fileToUpload);
  return this.http.post<any>('https://localhost:5001/', input).pipe(
    switchMap(res => this.language(res)),  // <-- `res` = response from previous request
    switchMap(res => this.getDetails(res)) // <-- `res` = response from `this.language()`
  );
}

language(data: any) {
  return this.http.post<any>('https://localhost:5002', data)
}

getDetails(data: any) {
  return this.http.post<any>('https://localhost:5003', data)
}

Component

Demo(): any {
  if (fileToUpload) {
    this._voiceboxService.upload(fileToUpload).subscribe({
      next: (res: any) => {                // <-- `res` = response from `getDetails()`
        this.text = res.prediction
        console.log(res);
      },
      error: (error: any) => {
        // handle errors
      }
    });
  } else {
    console.log("FileToUpload was null or undefined.");
  }
}

How to make sequential service call on success of first service response in Angular

2 Answers2