Rxjs. Forkjoin vs Zip и combineLatetst vs withLatestFrom

Вначале хочется упомянуть, что Cédric Soulas недавно запилил новую версию reactive.how.

Forkjoin vs Zip

Эти операторы Rxjs удобны для параллельного вызова http запросов и объединения их результатов. Оба принимают n потоков, ждут значение от всех n потоков и возвращают результат в виде массива.

  • forkJoin ждёт complete всех внутренних потоков, после этого пакует их последние значенияи и один раз выкидывает результат. Если один из внутренних потоков не завершится, то forkJoin не выкинет значения.
  • zip выкидывает результат каждый раз как получает по одному значения от каждого из внутренних потоков.

zip.png

Важной особенностью zip является тот факт, что комбинируются не последние актуальные значения потоков, а просто соответствующие "порядковым номерам" отдельных потоков. Другими словами, если запусть 2 таймера и один из них будет выкидывать значения быстрее, то в результате будут получаться парно одинаковые значения: [0,0], [1,1], [2,2], ...

const { combineLatest, interval } = Rx;

const timer1$ = interval(900);
const timer2$ = interval(1300);

combineLatest(
  timer1$,
  timer2$,
);
0,01,12,23,34,4

combineLatetst vs withLatestFrom

Если же нужны последние значения, то следует применять оператор combineLatetst

combinelatest.png

const { combineLatest, interval } = Rx;

const timer1$ = interval(900);
const timer2$ = interval(1300);

combineLatest(
  timer1$,
  timer2$,
);
0,01,01,12,13,13,2

withLatestFrom очень похож на combineLatetst с тем отличием, что в результатирующий поток не попадет новое значение когда его выкидывает поток withLatestFrom. Простыми словами: когда основной поток выкидывает значение, то он просит withLatestFrom дать последнее значение которое у него было.

withLatestFrom.png

const { interval } = Rx;
const { withLatestFrom } = RxOperators;

const timer1$ = interval(380);
const timer2$ = interval(900);

timer2$.pipe(
    withLatestFrom(timer1$)
);
0,11,32,63,8

Анимированный пример «zip vs combineLatest» от reactive.how

Похожие записи

Axios или fetch

Сравнение на примере GET/POST запросов, обработке ошибок и возможности задавать базовую конфигурацию.

Angular. Когда не надо отписываться в RxJS?

В async pipe за вас отпишется Angular. Во всех остальных случаях лучше отписываться самостоятельно. Допускается не отписываться в потоках, где будет гарантировано вызван complete.

RxJS. Delay from array

import { of, from } from 'rxjs'; 
import { map, concatMap, delay } from 'rxjs/operators';

from([2,4,6,8]).pipe(
  concatMap(item => of(item).pipe(delay(1000)))
).subscribe(console.log);