Published
Edited
May 8, 2020
1 star
Insert cell
md`# combination`
Insert cell
import { of, concat, merge, forkJoin, tap, delay, interval, mergeMap } from '@egman24/rxjs-6-5-5'
Insert cell
md`
- https://www.learnrxjs.io/learn-rxjs/operators/combination
- https://medium.com/@martinkonicek/rx-combinelatest-vs-withlatestfrom-ccd98cc1cd41
- https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom
`
Insert cell
md`
#### concat
> sequential, 'ordered', 'blocking'
`
Insert cell
concat(...[
of(1).pipe(delay(5000)),
of(2).pipe(delay(1000)),
of(3).pipe(delay(2000))
]).pipe(
tap(console.log)
)//.subscribe()
Insert cell
interval(1000).pipe(
mergeMap(x => concat(...[
of([(new Date).toISOString(), x]).pipe(delay(3000)),
of([(new Date).toISOString(), x + 1]).pipe(delay(500)),
of([(new Date).toISOString(), x + 2]).pipe(delay(800))
])),
tap(console.log)
)//.subscribe()
Insert cell
md`
#### merge
> concurrent/parallel, 'non-ordered', 'non-blocking'
`
Insert cell
merge(...[
of(1).pipe(delay(5000)),
of(2).pipe(delay(1000)),
of(3).pipe(delay(2000))
]).pipe(
tap(console.log)
)//.subscribe()
Insert cell
interval(1000).pipe(
mergeMap(x => merge(...[
of([(new Date).toISOString(), x]).pipe(delay(3000)),
of([(new Date).toISOString(), x + 1]).pipe(delay(500)),
of([(new Date).toISOString(), x + 2]).pipe(delay(800))
])),
tap(console.log)
)//.subscribe()
Insert cell
md`
#### forkJoin
> act in concurrent/parallel, but wait for ALL results before emitting value (all MUST return)

- like Promise.all
- https://www.learnrxjs.io/learn-rxjs/operators/combination/forkjoin
`
Insert cell
forkJoin(...[
of(1),
of(2),
of(3),
]).pipe(
tap(([a, b, c]) => console.log(a, b, c))
)//.subscribe()
Insert cell
forkJoin({
a: of(1),
b: of(2),
c: of(3)
}).pipe(
tap(({ a, b, c }) => console.log(a, b, c))
)//.subscribe()
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more