Открыть меню    

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 диаграммы

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 (оригинал)

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

Комментарии к статье

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