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

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

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

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

JS. Get query param

function getQueryParam(item) {
  var svalue = window.location.search.match(new RegExp('[\?\&]' + item + '=([^\&]*)(\&?)', 'i'));
  return svalue ? svalue[1] : svalue;
}

// /foo/bar/baz.html?lang=ru
var lang = getQueryParam('lang') || 'en';