Rxjs: Observable.combineLatest vs Observable.forkJoin

Question

Just wonder what is differences between Observable.combineLatest and Observable.forkJoin? As far as I can see, the only difference is forkJo

Answer 1

Not only does forkJoin require all input observables to be completed, but it also returns an observable that produces a single value that is an array of the last values produced by the input observables. In other words, it waits until the last input observable completes, and then produces a single value and completes.

In contrast, combineLatest returns an Observable that produces a new value every time the input observables do, once all input observables have produced at least one value. This means it could have infinite values and may not complete. It also means that the input observables don't have to complete before producing a value.

Answer 2

Also:

combineLatest(...) runs observables in sequence, one by one

combineLatest internally uses concat, which means a value must be obtained for each observable in the array before moving onto the next.

// partial source of static combineLatest (uses the rxjs/operators combineLatest internally):
// If you're using typescript then the output array will be strongly typed based on type inference
return function (source) { return source.lift.call(from_1.from([source].concat(observables)), 
                           new combineLatest_1.CombineLatestOperator(project)); };

forkJoin(...) runs observables in parallel, at the same time

If you have 3 source observables, and they each take 5 seconds to run then it'll take 15 seconds for combineLatest to run. Whereas forkJoin they execute in parallel so it will take 5 seconds.

So forkJoin works somewhat more like Promise.all(...) where the order isn't enforced.

Consideration for error handling:

If any of the observables error out - with combineLatest the subsequent ones won't get executed, but with forkJoin they are all running. So combineLatest can be useful to execute a 'sequence' of observables and collect the result all together.

---

Advanced note: If the source observables are already 'running' (subscribed to by something else) and you're using share on them - then you won't see this behavior.

Even more advanced note: CombineLatest will always give you the latest from each source, so if one of the source observables emits multiple values you will get the latest. It doesn't just get a single value for each source and move onto the next. If you need to ensure you only get the 'next available item' for each source observable you can add .pipe(take(1)) to the source observable as you add it to the input array.

Answer 3

forkJoin - When all observables complete, emit the last emitted value from each.

combineLatest - When any observable emits a value, emit the latest value from each.

Usage is pretty similar, but you shouldn't forget to unsubscribe from combineLatest unlike forkJoin.