Performing multiple HTTP requests in Angular with forkJoin

Use case

There are use cases where you need to make multiple HTTP requests (to same or different server) and you need to wait until you get responses from all the HTTP requests for rendering the view.

Solution

‘forkJoin’ is the easiest way, when you need to wait for multiple HTTP requests to be resolved

‘forkJoin’ waits for each HTTP request to complete and group’s all the observables returned by each HTTP call into a single observable array and finally return that observable array.

The above example shows making three HTTP calls, but in a similar way, you can request as many HTTP calls as required.

As shown in the above code snippet, at the component level you subscribe to single observable array and save the responses separately.

ForkJoin official docs — http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-forkJoin

👏

Written by

A passionate developer, blogger- http://swarnakishore.github.io/ In love with Angular 10, React Native, Ionic, GraphQL and Material Design😍

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store