Angular wait for multiple http requests to complete and then fire the last one

I have 4 http requests. Three receives lookup values while the 4th one gets actual form data.

They go like this:

 let medicalData = this.data.getCodes('medical').subscribe((data: {}) => { console.log('med'); this.Medical = data; }); let delayData = this.data.getCodes('delay').subscribe((data: {}) => { console.log('del'); this.Delays = data; }); let disabilityData = this.data.getCodes('disability').subscribe((data: {}) => { console.log('dis'); this.Disability = data; }); let districtData = this.data.getCodes('district').subscribe((data: {}) => { console.log('dist'); this.District = data; }); 

How can I make the 4th get request wait till the first three requests are complete ?

Thanks in advance

2 Answers

You should use forkJoin to achieve the desired result. forkJoin waits for all obesrvables to complete before emitting a value. Example:

forkJoin( this.data.getCodes('medical'), this.data.getCodes('delay'), this.data.getCodes('disability'), this.data.getCodes('district'), ).subscribe(([medicalData, delayData, disabilityData, districtData]) => { this.Medical = medicalData; this.Delays = delayData; this.Disability = disabilityData; this.District = districtData; // make your last http request here. }); 

You can use forkJoin

let medicalData = this.data.getCodes('medical'); let delayData = this.data.getCodes('delay'); let disabilityData = this.data.getCodes('disability') Observable.forkJoin([medicalData, delayData, disabilityData]).subscribe((responses)=>{ // responses is an array of responses for the individual observables // Execute the code you want to run after the three observables here });