Angular 12 How To Call Multiple Rest API Using Subscribe Method-CodePudding

We need to call multiple REST API from ngOnInit() One by one. After calling first one we need to pass this response in second API call and same for the third one we need to get the value from second API call and pass it third one.

But while calling like below we are getting always undefined value .

this.globalVar1 : any;
this.globalVar2 : any;
this.globalVar3 : any;

async ngOnInit() {

this.apiService.getFirstAPICall(request).subscribe(info => {
            this.globalVar1 = info; //here value is coming from API service call
}
console.log(this.globalVar1); //here undefined 

//Now calling the second API ** here we need this first variable 
//but due to undefined we are getting error

this.apiService.getSecondAPICall(request.globalVar1).subscribe(info => {
            this.globalVar2 = info;
}
console.log(this.globalVar2); //here undefined

CodePudding user response：

You are running asynchronous code, that means your requests can be executed in parallel, then it happens that you make the second request before the results of the first are here.

There are several ways to make your code run sequentially, one would be to use the await keyword. This waits for the code in the current line to finish before exectuting the next line.

Your code would then look like this:

this.globalVar1 : any;
this.globalVar2 : any;
this.globalVar3 : any;

async ngOnInit() {

  this.globalVar1 = await this.apiService.getFirstAPICall(request);
  console.log(this.globalVar1);

  this.globalVar2 = await this.apiService.getSecondAPICall(this.globalVar1);
  console.log(this.globalVar2);
}

Another way to solve the problem would be to make the second request in the subscribe of the first.

CodePudding user response：

Subscribe is asynchronous meaning it will not wait until it executes to fire the next line of your code. Instead you should convert your .subscribe() into a promise. Usually using the .toPromise().

Then you can await on the promises and assign the value to a parameter that you could pass to the next execution.

example

async ngOnInit() {
    const res1 = await this.apiService.getData(); // getData() should already be a promise returning a value of type Promise<YourType>
    const res2 = await this.apiService.getData2(res1);
    // etc...
}

CodePudding user response：

You can use rxjs switchMap operator, you can then pass the data from first call to the inner observable (second call). you don't need then any global variables and no converting to a promise since httpClient returns an Observable

import { switchMap } from 'rxjs/operators';
...

this.apiService.getFirstAPICall(request).pipe(
  map(response1 => // edit your data here)
  switchMap((editedResponse1) => this.getSecondAPICall(editedResponse1) )
).subscribe()

CodePudding user response：

Solution 1

async ngOnInit() {
   const res1 = await this.getFirstAPICall(request).pipe(first()).toPromise();

   const res2 = await this.getSecondAPICall(res1).pipe(first()).toPromise();
}

Solution 2

async ngOnInit() {
   this.apiService.getFirstAPICall(request).pipe(
       switchMap(first => this.apiService.getSecondAPICall(first)),
       switchMap(secondRes => this.apiService.getAnotherAPICall(secondRes)),
   ).subscribe(response => console.log(response));
}