Parallel calls in Angular like $q from AngularJs

While working on an angular component having multiple api’s to call to get the desired result we want to call them in parallel (just like we remember doing it with $q.all() from angular). Not to worry we have forkJoin from RxJs to do the job.

Use case: There are cases where we need to make multiple HTTP requests and we need to wait until we get the requests resolved from all the HTTP requests for rendering the view. That’s where we need some function which can make these calls parallel and give us array of observables in one place.

forkJoin: forkJoin help us to do multiple http calls in parallel and waits for them to resolve.

forkJoin will wait for all the request to resolve and group all the obsevables returned by each HTTP call into a single observable array and finally return that observable array.

signature: forkJoin(…args, selector : function): Observable

forkJoin in service

In example above we have done 2 HTTP calls, the same way can be used for desired number of calls.

Component changes

We can subscribe the response as shown in the above example.

Pros: With forkJoin we can join observables from different HTTP calls and respond as one observable array.

Cons: If any of the inner observables supplied to error you will lose the value of any other observables that would or have already completed. We can avoid this with catching error properly in inner observable.

forkJoin links:

If you liked this article, please 👏 below, so that other people can find it! :D

Fullstack software Architect | Tech Blogger