The forkJoin Function
Explore the forkJoin function in RxJS to coordinate multiple Observable streams that must all complete before further processing. Understand how forkJoin resolves timing issues when loading combined data, such as REST API calls for web pages, and how to use destructuring for clearer code.
Introduction to forkJoin in RxJS
When we have a number of Observable streams that need to all complete before we do something, we can use the forkJoin function. This situation occurs quite often when dealing with REST requests at the start of a page load, where the page may need to load data from a number of different REST APIs before displaying the page.
Let’s assume that we are building a web page to show products available in a catalog.
What might we want on this page?
-
We may need one REST request that loads a store catalog based on the current date and another REST request that loads sales specials for the day.
-
Our page may want to display the sale items on the top of the page or in a scrolling banner, as well as all store items in the main body of the page.
-
We may also need a further REST request to load information related to the customer, such as their logged-in status or their country of origin.
-
Only when all of these requests have been completed can we display the page in full and allow the customer to add items to their shopping ...