The forkJoin Function

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

To illustrate this concept, let’s examine a few Observable streams: