Разновидности Subject и Расписания в RxJS

Jan 3, 2019

Простой Subject

Объект Subject, принцип работы - когда данные эмитятся он передает данные всем listener'ам, которые на него подписались. При подписке на Subject вам не придут 'старые' значения, то есть придут только те, которые эмитятся псле подписки.

public subject = new Subject<number>();

BehaviorSubject

Это Subject, который требует начального значения и передает его текущее значение новым подписчикам. behaviorsubject на earnrxjs.io

public subject = new BehaviorSubject<number>(0);
// RxJS v6+
import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

//two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

//two subscribers will get new value => output: 456, 456
subject.next(456);

//new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);

//all three subscribers will get new value => output: 789, 789, 789
subject.next(789);

// output: 123, 123, 456, 456, 456, 789, 789, 789

ReplaySubject

ReplaySubject - мы можем установить:
1-й параметр - сколько значений мы хотим запомнить.
2-й - время в течении которого нам нужны изменения

public subjectReplay = new ReplaySubject<number>(3, 4000);

AsyncSubject

AsyncSubject - при подписке ничего не происходит, и значение будет возвращено только при complete.

public subjectAsync = new AsyncSubject<number>();

Пример работы Subject

Разновидности Subject (примеры)

Расписания в RxJS

В js есть микро и макротаски - это означает, что одна асинхронность может выполняться быстрее другой.

const o1 = of(1,2,4,5);
const o2 = of(5);
const o = combineLatest(o1, o2);

o.subscribe({
    next: (value: any) => console.log('next: ', value),
    complete: () => console.log('complete'),
    error: (error) => console.log('error: ', error)
});

Данный вызов выведет [5,5] так как операции синхронные.

Но мы можем изменить последовательность, добавив расписание, то есть изменить последовательность, чтобы она было асинхронной. Оператор observeOn позволяет указать расписание.

const o1 = of(1,2,4,5).pipe(
	observeOn(asyncScheduler)
);
const o2 = of(5);
const o = combineLatest(o1, o2);

o.subscribe({
    next: (value: any) => console.log('next: ', value),
    complete: () => console.log('complete'),
    error: (error) => console.log('error: ', error)
});

// output
/*
[ 1, 5 ]
[ 2, 5 ]
[ 4, 5 ]
[ 5, 5 ]
*/

То есть мы заставили последовательность быть асинхронной.

Варианты расписаний

  • observeOn(asyncScheduler) - асинхронный
  • observeOn(asapScheduler) - планировщик asap лучше подходит для асинхронных операций, которые должны произойти как можно быстрее, независимо от времени.
  • observeOn(queueScheduler) - синхронный

Вывод

Для любуй последовательности можно определить расписание.

Добавить комментарий