Observable в RxJS: краткое введение

Поскольку термин “observable” сложно воспринять русскому уху, здесь я буду использовать термин “зрелище”.

Узрите зрелище:

Диаграмма успешно завершившегося зрелища
Диаграмма зрелища, завершившегося ошибкой

Анатомия зрелища:

  • ось времени,
  • событие (шарик),
  • ошибка (крестик),
  • конец (вертикальная чёрточка).

В RxJS зритель подписывается на зрелище. Подписавшийся зритель реагирует на каждое событие, которое происходит во время зрелища.

Создание зрелища в RxJS:

const observable = new Observable((observer) => {
const datasource = new DataSource();
datasource.ondata = (e) => observer.next(e);
datasource.onerror = (err) => observer.error(err);
datasource.oncomplete = () => observer.complete();
return () => {
console.log('Зрелище завершилось или' +
'все зрители отписались от зрелища');
}
})

Конструктор зрелища принимает функцию, которая в свою очередь принимает зрителя (observer). Зритель имеет три метода:

  • next() — заставляет зрителя отреагировать на событие, произошедшее во время зрелища,
  • error() — заставляет зрителя отреагировать на ошибку, вследствие которой зрелище закончилось; если внутри функции, передаваемой в конструктор зрелища, возникнет необработанная ошибка, зритель также будет вынужден отреагировать на неё,
  • complete() — заставляет зрителя отреагировать на конец зрелища.

Подписка на события зрелища в RxJS:

const subscription = observable.subscribe(
function (x) {
console.log('Событие: ' + x.toString());
},
function (err) {
console.log('Ошибка: ' + err);
},
function () {
console.log('Событие завершилось');
}
);

Мы можем отписаться от зрелища, прежде чем оно завершилось используя subscription.unsubscribe() .