RxJS Crash Course – zip and forkJoin operators

RxJS Crash Course –  zip and forkJoin operators
zip and forkJoin operators

.zip() operator

Now let’s look at a few ways we can observables starting with zip. Zip is something that might be useful if you have two observables that are the same length and connected in some kind of way.

So, here we have observables yin and yang and we’re going to combine them with a zip which will combine them into arrays based on their index position.

In the observable so peanut butter will be matched with jelly, wine with cheese, and rainbows with unicorns.

.forkJoin() operator

Another way to merge observables is with forkJoin. This one will wait for both of the observables to complete and then it will combine the last two values together.

So, I’m going to put a delay on the yang observable then we’ll use the forkJoin operator to combine them just like zip.

But at this time we should see a two-second delay and then only the last two values rainbows and unicorns should be emitted.

This operator is useful if you have a bunch of related API calls and you want to wait for all of them to resolve before sending any data through to the UI.

Let us move to the next article: