В этом посте мы поговорим о новых возможностях и доработках последней версии RxJS 6.5.0.

Новый оператор fromFetch

Теперь RxJS предоставляет встроенную поддержку нативного fetch API, включая возможность прерывать запросы при помощи AbortController.

import { of } from 'rxjs';
import { switchMap, catchError } from 'rxjs/operators';
import { fromFetch } from 'rxjs/fetch';

const users$ = fromFetch('https://reqres.in/api/users').pipe(
  switchMap(response => {
    if (response.ok) {
      return response.json();
    } else {
      return of({ error: true, message: `Error ${response.status}` });
    }
  }),
  catchError((error) => of({ error: true, message: error.message }))
);

users$.subscribe({ next(data) { ... }, complete() { ... } });

Усовершенствованный оператор forkJoin

Это мне понравилось больше всего. Оператор forkJoin теперь принимает словарь источников:

import { forkJoin, timer } from 'rxjs';
import { take, mapTo } from 'rxjs/operators';

const source = forkJoin({
  todos: timer(500).pipe(mapTo([{ title: 'RxJS'}])),
  user: timer(500).pipe(mapTo({ id: 1 }))
});

source.subscribe({
  next({ todos, user }) { }
});

Кроме того, использование данного оператора в виде forkJoin(a, b, c, d) признано устаревшим, вместо этого нужно писать forkJoin([a, b, c, d]).

// DEPRECATED 
forkJoin(of(1), of(2)).subscribe();

// use an array instead
forkJoin([of(1), of(2)]).subscribe();

Partition Observable

Существующий оператор partition теперь считается устаревшим, и на его место приходит новый порождающий observable-оператор partition.
Partition разделяет объект-источник на два объекта типа observable, один — для значений, которые удовлетворяют заданному предикату, и второй — для значений, которые не удовлетворяют.

import { fromEvent, partition } from 'rxjs';

const clicks$ = fromEvent(document, 'click');

const [clicksOnH1$, clicksElsewhere$] =
  partition(clicks$, event => event.target.tagName === 'H1');

clicksOnH1$.subscribe({
  next() { console.log('clicked on h1') }
});

clicksElsewhere$
  .subscribe({
    next() {
      console.log('Other clicked')
    }
  });

combineLatest переведен в статус deprecated

В новой версии больше не используются сигнатуры combineLatest, за исключением combineLatest([a, b, c]). О причинах такого изменения читайте здесь.

Планировщики

Используйте оператор scheduled, чтобы сконфигурировать планировщик для существующего observable. Планируемые (те, которые принимают планировщик в качестве параметра) версии операторов from, range и других признаны устаревшими.

import { of, scheduled, asapScheduler } from 'rxjs';

console.log(1);

// DEPRECATED
// of(2, asapScheduler).subscribe({
//   next(value) {
//     console.log(value);
//   }
// });

scheduled(of(2), asapScheduler).subscribe({
  next(value) {
    console.log(value);
  }
});

console.log(3)

Что нового в RxJS v6.5