Подробное описание объекта Observable в Angular2

Введение

Ядро RxJs - это объект Observable, который реализует комбинированную асинхронную и событийную программирование с использованием наблюдаемых данных.
Аналогичная асинхронная модель программирования - Promise, Promise - это модель асинхронного программирования на основе изменений состояния, после того как состояние переходит от ожидания к успешному или неудачному, его нельзя изменить снова, при изменении состояния подписчик может получить только одно значение; а Observable - это модель асинхронного программирования на основе последовательности, подписчик может продолжать不断地 получать новые значения в зависимости от изменений последовательности. Более того, Promise предоставляет только режим ожидания, и нет других операций, которые поддерживали бы сложную обработку результатов, а Observable предоставляет множество различных операторов для обработки результатов, чтобы удовлетворить сложные логики приложений.

В реальном программировании мы в основном работаем с тремя объектами:Observable,наблюдатель,Подписка:

Смотрите пример использования Observable на примере события click элемента:

var clickStream = new Rx.Observable(observer => {
var handle = evt => observer.next(evt);
element.addEventListener('click', handle);
return () => element.removeEventListener('click', handle);
);
subscription = clickStream.subscribe(evt => {
console.log('onNext: ' + evt.id);
}, err => {
console.error('onError');
}, () => {
console.log('onComplete');
);
setTimeout(() => {
subscription.unsubscribe();
}, 1000);

Если нужно обрабатывать каждый события таким образом, это было бы слишком麻烦, поэтому RxJs предоставляет удобную функцию: Observable.fromEvent для удобного объединения событий.

Обычные операторы для объединения:concat, merge, combineLates и т.д.

Проекционные операции:map, flatMap, flatMap требует особого внимания

Фильтрация:filter, distinctUltilChanges

Категории операторов:Operators by Categories

Обработка ошибок:catch, retry, finally

Уменьшение нагрузки:debounce, throttle, sample, pausable

Уменьшение:buffer, bufferWithCount, bufferWithTime

Чтобы изучить операторы Observable, нужно сначала научиться понимать диаграммы последовательностей:

Стрелки представляют собой последовательности, изменяющиеся с течением времени, например, постоянные нажатия на элемент мыши, кружки представляют влияние последовательности на внешнюю среду, например, каждый раз при нажатии на элемент вызывается回调 функции, цифры в кружках представляют информацию, издаваемую向外, например, при каждом срабатывании события создается объект события, представляющий информацию о данном действии.

Чтобы灵活 использовать Observable для обработки сложной логики, нужно научиться использовать предоставляемые им операторы. Я разделяю операторы на две категории: операции с одной последовательностью и операции с составной последовательностью. Операции с одной последовательностью - это операции, выполняемые над одной последовательностью, а операции с составной последовательностью - это операторы, обрабатывающие две или более последовательностей, и они несколько сложнее для понимания.

Сначала рассмотрим операцию с одной последовательностью, например, map.

Операция map преобразует информацию, издаваемую каждый раз последовательностью, например, как на рисунке map умножает каждое значение на десять, поэтому после подписки подписчики получают значения, которые уже не являются исходными 123, а преобразованными 10 20 30. С помощью диаграммы последовательности можно более удобно понять вычисления Observable.

Давайте рассмотрим операцию с составной последовательностью, например, merge.

Цель операции merge - это объединение двух независимых последовательностей в одну. Оригинальная последовательность 1, с продвижением времени, в 100 мс издает a, в 200 мс издает b, в 300 мс издает c, его подписчики в 400 мс получают три значения abc; последовательность 2 в 150 мс издает d, в 250 мс издает e, в 350 мс издает f, его подписчики в течение 400 мс получают три значения def. А новый последовательность после merge получит abcdef в течение 400 мс (внимание, порядок).

Понимание常用 операторов:

Observable.range：Серия передач определенного количества значений

Observable.toArray: Преобразование всех переданных значений в массив при завершении последовательности

Observable.flatMap: Преобразование элементов исходного потока в новый поток и merge этого нового потока в элементы исходного потока

Observable.startWith: Он устанавливает первый значения Observable последовательности

Observable.combineLatest: Аналогично promiseAll, выполняется только после того, как все последовательности завершены

Observable.scan: Агрегация значений при каждом переданном значении в последовательности, аналогично reduce, который агрегирует значения всего ряда, отправляя один конечный значения при завершении последовательности

Observable.sample: Изъятие определенного количества образцов из непрерывной последовательности

Observable.merge：Слияние нескольких последовательностей в одну, можно использовать OR

Observable.timestamp: Получение времени передачи каждого значения

Observable.distinctUntilChanged(compare, selector): selector извлекает ключ для сравнения, compare используется для сравнения двух ключей

Observable.takeWhile() Остановка передачи данных при значении параметра false

Резюме

Вот и все статьи. Надеюсь, что материалы статьи помогут вам в изучении или работе. Если у вас есть вопросы, вы можете оставить комментарий для обсуждения.