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 запросов, обработке ошибок и возможности задавать базовую конфигурацию.

RxJs Subjects

Выдержки из доклада Андрея Алексеева (Tinkoff) про RxJs (Subject, Behaviour Subject, Replay Subject, Async Subject). Применение в Angular.

Поисковый запрос с помощью RxJS

Показательная и востребованная задача. Получение набираемого запроса из поля ввода через полсекунды после того, как пользователь закончил ввод с показом лоадера.