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

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

RxJS Pipeable Operators

Начиная с версии rxjs 5.5 операторы вместо цепочки вызовов применяются как параметры функции pipe.

Добавить css link и js script динамически

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...