RxJS. Тонкость работы iif

Опубликовано в RxJS • 19 июля 2019 г. • 1 мин. на чтение

iif принимает функцию-условие и 2 необязательных Observable. Роль iif заключается в том, чтобы подписаться на один из Observable. В простых случаях все работает ожидаемо: 

import { iif, of, pipe } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const source$ = of('Hello');

source$.pipe(
  mergeMap(v =>
    iif(
      () => v === 'Hello',
      of('first').pipe(tap(x => console.log(`>>> ${x} <<<`))),
      of('second').pipe(tap(x => console.log(`>>> ${x} <<<`))),
    ))
).subscribe(console.log);
// >>> first <<<
// first

Проблема может возникнуть, если использовать оператор для задачи отправки http-запросов (2 и 3 аргумент iif) в зависимости от результата функции-условия т.е. если вернулось true, то сделать первый запрос, если false - второй. 

iif(
  () => Boolean(condition),
  this.httpRequestOne(),
  this.httpRequestTwo()
)

В действительности будут выполнены оба запроса, но в поток вернётся результат только одного. Такое поведение можно проиллюстрировать следующим примером:

import { iif, of, pipe } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const source$ = of('Hello');
const obsOne$ = (x) => {console.log(`${x} World`); return of('One')};
const obsTwo$ = (x) => {console.log(`${x}, Goodbye`); return of('Two')};

source$.pipe(
  mergeMap(v =>
    iif(
      () => v === 'Hello',
      obsOne$(v),
      obsTwo$(v)
    ))
).subscribe(console.log);

Будет выведено

Hello World
Hello, Goodbye # ВНЕЗАПНО
One

Решением будет использовать оператор defer вместо iif.

defer(() => (
  Boolean(condition) 
    ? this.httpRequestOne()
    : this.httpRequestTwo()
))

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

RxJS Pipeable Operators

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

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);