Wednesday, December 1, 2021

RxJS - forkJoin, combineLatest, zip and withLatestFrom


forkJoin



It will emit the latest value from each source Observables ONLY after they all complete.


Ex:

 
// emit [0, 1, 2]
const s1$ = interval(1200)
.pipe(
tap(c => console.log('%s', c)),
take(3)
);

// emit [0, 1, 2, 3]
const s2$ = interval(500)
.pipe(
tap(c => console.log('\t%s', c)),
take(4)
);

forkJoin([s1$, s2$])
.subscribe(
([s1, s2]) => console.log('\t\t%s%s', s1, s2),
);


Result:


Step    s1 s2 => output
-------------------------------
1           0
2           1
3       0
4           2
5           3
6       1
7       2           23



According to the result above, the output Observable will emit a value only if all source Observable complete (such as step 7).



Combine multiple source Observables to create an output Observable which emit the latest values from each source Observables.


Ex:

 
// emit [0, 1, 2]
const s1$ = interval(1200)
.pipe(
tap(c => console.log('%s', c)),
take(3)
);

// emit [0, 1, 2, 3]
const s2$ = interval(500)
.pipe(
tap(c => console.log('\t%s', c)),
take(4)
);

combineLatest([s1$, s2$])
.subscribe(
([s1, s2]) => console.log('\t\t%s%s', s1, s2),
);


Result:


Step    s1 s2 => output
------------------------
1           0
2           1
3       0           01
4           2       02
5       1           12
6           3       13
7       2           23



According to the result above, the output Observable will not emit any values if some source Observables have not emitted values before (such as step 1 and 2).


zip



Create an output Observable, and it emits values by calculating values from each Source Observable in order. And if some source Observables have not emtited values before, then the output Observable will wait for it.


Ex:

 
// emit [0, 1, 2]
const s1$ = interval(1200)
.pipe(
tap(c => console.log('%s', c)),
take(3)
);

// emit [0, 1, 2, 3]
const s2$ = interval(500)
.pipe(
tap(c => console.log('\t%s', c)),
take(4)
);

zip(s1$, s2$)
.subscribe(
([s1, s2]) => console.log('\t\t%s%s', s1, s2),
);


Result:


Step    s1 s2 => output
------------------------
1           0
2           1
3       0           00
4           2
5           3
6       1           11
7       2           22



According to the result above, the output Observable only emit values for step 3, 6, and 7.


withLatestFrom



One source(primary) Observable will combine with another(secondary) Observable, and the primary Observable calcualte the output values only if it can find the latest values from secondary Observable.


Ex:

 
// emit [0, 1, 2]
const s1$ = interval(1200)
.pipe(
tap(c => console.log('%s', c)),
take(3)
);

// emit [0, 1, 2, 3]
const s2$ = interval(500)
.pipe(
tap(c => console.log('\t%s', c)),
take(4)
);

s1$.pipe(
withLatestFrom(s2$)
).subscribe(
([s1, s2]) => console.log('\t\t%s%s', s1, s2),
);


Result:


Step    s1 s2 => output
------------------------
1           0
2           1
3       0           01
4           2
5           3
6       1           13
7       2           23


No comments:

Post a Comment