Observable под капотом

Библиотека Reactive Extensions - реализует механизм асинхронного распространения событий, который используется в Angular для обнаружения изменений и распространения событий (система по отправке и получении уведомлений).

Домашняя страница проекта Reactive Extensions

Как работает: объект observer собирает события и распространяет их среди подписчиков через Observable. Для управления потоком событий к подписчику используются специальные операторы.

В Angular Reactive Extensions необходима для следующий функций Angular: обновление потомков, получение информации о потомках, выдача асинхронных запросов HTTP.

Зачем использовать Reactive Extensions

Единный интерфейс для любых источников данных
Возможность объединять источники или подключать их по очереди
120+ операторов
Отмена подписки, когда данные больше не нужны
Lazy - не будет работать пока нет subscribe

Какие задачи легко решать с RxJs

RxJs работает с любыми источниками данных: события, запросы, клики, массивы, интервалы, 'live search' и т.д.

Drag & Drop - пример на CodePen

Объединение несколько событий вместе
Фильтрация события (delay, debounce, throttle)
Управление асинхронными действиями
Когда нужна отмена запросов

Операторы RxJS

Позволяют создавать Observable:

from() - создает Observable, принимает любые данные
fromEvent() - создает Observable из event
fromPromise() - создает Observable из Promise

scan() - позволяет накапливать данные
delay() - позволяет откладывать emit
debounceTime() - предотвращает прокидывание значения, если оно приходит, например, чаще чем 200ms: debounceTime(200)
map - функция вызывается для каждого события, сгенерированного Observable, и возвращает Observable, который emit результат применения функции (map)
filter() - функция вызывается для каждого события, сгенерированного Observable, и отбрасывает те из них, для которых функция возвращает false
take() - позволяет взять только несколько значений
mergeMap() - оставляет в силе предыдущий Observable
switchMap() - делает complete для предыдущего Observable
distinctUntilChanged - метод подавляет события до изменения объекта события
skipWhile - метод отбрасывает события испускаемые Observable до тех пор пока не выполнится условие (skipwhile)
takeWhile - передает события подписчику до тех пор пока условие не станет ложным
merge - берет один Observable и замешивает в него значение из другого Observable
pluck - передаем имя поля, которое мы хотим получить

Marbles диаграммы

Observable

Класс Observable (наблюдаемый объект) - предоставляет последовательность наблюдаемых программой событий/источник событий. Мы можем подписаться на Observable и получать уведомления при каждом наступлении события.

Метод subscribe

Метод subscribe в качестве аргументов получает 3 функции:

next - функция вызывается при инициализации нового события
error - функция вызывается при инициализации ошибки
complete - функция вызывается при завершении последовательности событий

А как же Promise

Объекты Observable обладают большей гибкостью и большей функциональность, но все же библиотека Reactive Extensions предоставляет метод Observable.fromPromise - создает Observable, который использует Promise как источник событий.

Также есть метод Observable.toPromise - для того чтобы Observable превратить в Promise.

Observer

Observer (наблюдатель) - механизм создания обновлений.

Методы Observer

next(data) - создает новое событие с использованием нового значения (data)
error(errObj) - сигнализирует об ошибке
complete() - сигнализирует об окончании последовательности событий

Объекты типа Subject

Библиотека Reactive Extensions предоставляет класс Subject, реализующий функциональность как Observable так и Observer. Следовательно можно создавать службы, которые и генерируют и потребляют события в одном объекте.

Subject - очень важно изучить, так как позволяют легко организовать взаимодействие между компонентами: Общение между компонентами через Observable и Subject, Angular (оригинал)

Более подробно на сайте dnzl.ru: Observable под капотом