Angular 12 How To Call Multiple Rest API Using Subscribe Method

Question

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

https://stackoverflow.com/questions/42626536/angular-2-chaining-http-requests — AT82, Nov 26 '21 at 09:53

score 2 · Answer 1 · answered Nov 26 '21 at 09:55

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.

score 1 · Answer 2 · answered Nov 26 '21 at 09:56

1

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...
}

answered Nov 26 '21 at 09:56

mikegross

1,674
2
12
27

I'm getting value only If I use subscribe , else no data is coming – D S Nov 26 '21 at 11:54
@DS you need to transform your observable to a promise. If you do not understand the difference between both, read the doc here: https://angular.io/guide/comparing-observables – mikegross Nov 26 '21 at 12:51

Fateh Mohamed · Answer 3 · 2021-11-26T12:16:38.210

1

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()

edited Nov 26 '21 at 12:16

answered Nov 26 '21 at 09:58

Fateh Mohamed

20,445
5
43
52

We need to edit the first response before send it to the second one, so how to return the value for every api call without using subscribe , note : I 'm checking if using subscribe only then I can get value inside it's scope ,other solutions doesn't return value from response – D S Nov 26 '21 at 12:01
you will have only one subscribe at the end and for changing a response before passing it to the next you can use map, check my update – Fateh Mohamed Nov 26 '21 at 12:15

Angular 12 How To Call Multiple Rest API Using Subscribe Method

3 Answers3