Учебник RxJS: наблюдаемые, операторы и не только

Получите быстрый начать с RxJS

Пропустить просмотр видео. Изучите RxJS и реактивное программирование с помощью интерактивных текстовых уроков.

Создание реактивных приложений с помощью RxJS

Что такое реактивное программирование?

Сегодня почти каждое онлайн-приложение генерирует большие объемы интерактивных данных в реальном времени. Ожидается, что приложения будут вносить изменения во всем приложении в ответ на события и оставаться полностью функциональными в течение всего процесса. Реактивная парадигма была создана для обработки этих «событий» с обновлением в реальном времени по всей программе.

Реактивные программы структурированы вокруг событий, а не последовательно сверху вниз выполнение итеративного кода. Это позволяет им реагировать на триггерное событие независимо от того, на каком этапе находится программа.

Реактивное программирование часто сочетается с функциональным программированием и параллелизмом для создания стабильных, масштабируемых и управляемых событиями программ.

Асинхронный и синхронный

Одна из основных концепций реактивного программирования — синхронные и асинхронные данные. Короче говоря, синхронные данные доставляются по одному, как можно скорее.

Асинхронные данные ждут установленного события, а затем доставляются сразу через «обратный вызов». Асинхронные данные более популярны в реактивном программировании, потому что они хорошо соответствуют подходу парадигмы, основанному на событиях.

Преимущества реактивного программирования

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

Другие преимущества:

• Высокая масштабируемость
• Чистота и удобочитаемость
• Легко добавить поддержку нового события или ответа.
• Улучшение взаимодействия с пользователем из-за небольшого времени простоя

Реактивная парадигма также может быть объединена с другими парадигмами, чтобы сформировать смешение, такое как объектно-ориентированное реактивное программирование (OORP) или функциональное реактивное программирование (FRP). Это смешиваемое качество делает реактивное программирование универсальной парадигмой, которую можно изменять для различных целей.

Что такое RxJS?

Реактивная парадигма доступна для многих языков через реактивные расширения или Rx-библиотеки . Эти библиотеки представляют собой загружаемые API-интерфейсы, которые добавляют поддержку основных реактивных инструментов, таких как наблюдатели и реактивные операторы . С помощью реактивных расширений разработчики могут преобразовывать обычные итеративные языки, такие как JavaScript, Python, C ++ и т. Д., В реактивные языки.

RxJS — это, в частности, функциональный инструмент реактивного программирования, включающий шаблон наблюдателя и шаблон итератора. Он также включает адаптированную форму функций массива JavaScript (сокращение, отображение и т. Д.) Для обработки асинхронных событий как коллекций.

Rx-библиотека JavaScript называется RxJS. RxJS стал очень популярным, потому что он упрощает асинхронную реализацию JavaScripts. Без расширений асинхронный JavaScript сложен в использовании и недостаточно развит. RxJS делает асинхронность более достижимой с помощью инструментов, созданных специально для реактивного и асинхронного программирования.

Многие фреймворки веб-приложений, такие как Angular, основаны на структурах RxJS. В результате вы, возможно, уже косвенно использовали RxJS!

Далее мы разберем основные компоненты RxJS и покажем вам, как реализовать их в вашем собственном коде.

RxJS Наблюдаемые

Наблюдаемые объекты — это части нашей программы, которые генерируют данные с течением времени. Данные наблюдаемого объекта — это поток значений, который затем может передаваться синхронно или асинхронно.

Затем потребители могут подписаться на наблюдаемые объекты, чтобы прослушивать все данные, которые они передают. Потребители могут быть подписаны на несколько наблюдаемых одновременно. Эти данные затем могут быть преобразованы по мере продвижения по конвейеру данных к пользователю.

Давайте посмотрим, как создать наблюдаемый!

 const {Observable} = require ('rxjs') const wrapArrayIntoObservable = arr =>  {return new Observable (subscriber => {for (let item of arr) {подписчик. следующий (элемент);  }});} данные const = [1, 2, 3, 4, 5];  const observable = wrapArrayIntoObservable (данные);  observable.subscribe (val => console.log ('Подписчик 1:' + val)); observable.subscribe (val => console.log ('Подписчик 2:' + val)); 

 //Вывод: Подписчик 1: 1 Подписчик 1: 2 Подписчик 1: 3 Подписчик 1: 4 Подписчик 1: 5 Подписчик 2:  1Subscriber 2: 2Subscriber 2: 3Subscriber 2: 4Subscriber 2: 5  

В строке 3 мы создаем функцию wrapArrayIntoObservable () , которая принимает массив в качестве параметра и превращает этот массив в наблюдаемый . Затем эта функция передается конструктору Observable в строке 12 и запускается для каждого подписчика. Наконец, в строках 14 и 15 каждый подписчик печатает полученный поток данных.

Конвейер данных RxJS

Конвейеры данных — это последовательный ряд преобразований, через которые проходят все данные в потоке, прежде чем они будут представлены пользователю. Эти преобразования могут быть применены ко всем проходящим данным, например, чтобы сделать поток более читаемым для пользователя.

Также могут быть необязательные преобразования, которые происходят только при определенных событиях, например, фильтрующие преобразования. . Данные по-прежнему проходят через эти необязательные преобразования, но просто не применяются.

Каждое преобразование можно рассматривать как сегмент конвейера, через который проходит поток данных.

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

 const {from} = require ('rxjs'); const {тап, фильтр,  карта} = требуется ('rxjs/операторы');  const arrayDataObservable $ = from ([1, 2, 3, 4, 5]);  const dataPipeline = arrayDataObservable $ .pipe (tap (val => console.log ('Значение, проходящее через поток:' + val)), filter (val => val> 2), map (val => val * 2))  const subscribeToBaseObservable = subscriberName => {return arrayDataObservable $ .subscribe (val => {console.log (subscriberName + 'Receive:' + val);})} const subscribeToDataPipeline = subscriberName => {return dataPipeline.subscribe (val => {  приставка. журнал (subscriberName + 'Received:' + val);  })} const handleSubscriptionToBaseObservable = () => {const subscription1 = subscribeToBaseObservable ('Subscriber1');  const subscription2 = subscribeToBaseObservable ('Subscriber2');} const handleSubscriptionToDataPipeline = () => {const subscription1 = subscribeToDataPipeline ('Subscriber1');  const subscription2 = subscribeToDataPipeline ('Subscriber2');}//1. Выполните эту функцию firsthandleSubscriptionToBaseObservable (); //2. Выполнить эту функцию next//handleSubscriptionToDataPipeline (); 

  //необработанный вывод Получен подписчик 1: 1 Получен подписчик 1: 2 Получен подписчик 1: 3 Получен подписчик 1: 4 Получен подписчик 1: 5 Получен подписчик 2: 1 Получен подписчик 2: 2 Получен подписчик 2: 3 Получен подписчик 2: 4 Получено подписчика 2: 5  

 //отфильтрованный вывод Значение, проходящее через поток: 1 Значение, проходящее через  поток: 2 Значение, проходящее через поток: 3 Полученный подписчик1: 6 Значение, проходящее через поток: 4 Полученный подписчик1: 8 Значение, проходящее через поток: 5 Полученный подписчик1: 10 Значение, проходящее через поток: 1 Значение, проходящее через поток: 2 Значение  проходящих через поток: 3Получено подписчика2: 6Значение проходит через поток: 4Получено подписчика2: 8Значение проходит через поток: 5Получено подписчика2: 10  

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

Операторы создания RxJS

Наиболее распространенными операторами, используемыми в конвейерах данных RxJS, являются операторы создания . Мы рассмотрим простой оператор создания from , использованный в предыдущем разделе, и тесно связанный оператор of .

from

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

Вот пример:

  const {from} = require ('rxjs');  const DATA_SOURCE = ['Строка 1', 'Строка 2', 'Еще одна строка', 'Я последняя строка']; const observable $ = from (DATA_SOURCE) observable $ .subscribe (console.log)   

 //outputString 1String 2 Еще одна строка Я последняя строка  

из

of является вторым по распространенности оператором создания. Оператор of синтаксически аналогичен оператору from , но of принимает последовательные данные, а не итерационные данные, такие как массивы. Если он получает массив, of просто печатает массив как декларативный оператор. При упаковке наблюдаемых объектов лучше всего использовать of , если данные имеют смысл в массиве.

  const {of} = require ('rxjs  '); const DATA_SOURCE = [' Строка 1 ',' Строка 2 ',' Еще одна строка ',' Я последняя строка ']; const observableArray $ = of (DATA_SOURCE) console.log («Источник данных массива»)  observableArray $ .subscribe (console.log) console.log (" n") console.log ("Источник данных последовательности") const observableSequence $ = of ('Строка 1', 'Строка 2', 'Еще одна строка',  'Я последняя строка') observableSequence $ .subscribe (console.log)  

 //источник данных outputArray ['String 1'  , 'Строка 2', 'Еще одна строка', 'Я последняя строка'] Источник данных последовательности Строка 1 Строка 2 Еще одна строка Я последняя строка  

Функция конвейера RxJS и конвейерные операторы

Функция pipe () вызывает все операторы, кроме операторов создания. Эти не создающие операторы являются операторами второго типа, называемыми конвейерными операторами .

Конвейерные операторы принимают один наблюдаемый объект в качестве входных данных и возвращают наблюдаемый объект в качестве выходных данных, трубопровод. Их можно вызывать как обычную функцию op1 () (obs) , но чаще они вызываются последовательно для формирования конвейера данных. Функция pipe () — это более чистый способ последовательного вызова нескольких операторов и, следовательно, предпочтительный способ вызова операторов..

 //standardop4 () (op3 () (op2 () (op1 () (obs))))  

  //функция трубы obs.pipe (op1 (), op2 (), op3 (), op3 (),)  

Считается рекомендуется использовать функцию pipe () , даже если вы вызываете только один оператор.

Операторы фильтрации RxJS

Самый распространенный тип of pipeable — это оператор фильтрации . Эти операторы удаляют все значения, не соответствующие переданным критериям. Мы рассмотрим популярные операторы фильтрации filter и first .

filter

Оператор filter принимает функцию предиката, например val => val + 1 == 3 , который применяется ко всем переданным значениям. Для каждого значения программа сравнивает данное значение с функцией предиката и сохраняет любые значения, которые делают функцию истинной .

В приведенном ниже примере допускаются только четные числа. через:

  const {from} = require ('rxjs'); const {filter} = require ('rxjs/operations');  const observable $ = from ([1, 2, 3, 4, 5, 6]) наблюдаемый $ .pipe (filter (val => val% 2 == 0)). subscribe (console.log)  

 //output246  

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

вначале

Оператор first можно использовать двумя способами. По умолчанию он возвращает первое значение, испускаемое наблюдаемым. Преимущество возврата первого значения заключается в том, что время выполнения заказа очень мало, что делает его идеальным для случаев, когда достаточно простого и быстрого ответа.

  const {from} =  require ('rxjs'); const {first} = require ('rxjs/operations'); const observable $ = from ([1, 2, 3, 4, 5, 6])//берем firstobservable $ .pipe (first  ()). subscribe (console.log)  

 //output1  

другое использование оператора first добавляет функцию предиката или значение по умолчанию для сравнения с переданными значениями. Подобно filter , first затем возвращает первое значение, соответствующее предикату. Это использование помогает выполнять поиск в потоке данных, когда вам нужно только одно значение.

  const {from} = require ('rxjs'); const {first} = require ('rxjs /Operators '); const observable $ = from ([1, 2, 3, 4, 5, 6])//Пример 1 - взять первым, который передает предикат, или по умолчанию наблюдаемый в противном случае $ .pipe (first (val => val  > 6, -1)). Subscribe (console. log)  

 //output-1  

Операции фильтрации являются чистыми операциями , что означает, что на исходные наблюдаемые данные не влияют никакие преобразования в передаваемый поток данных

Что узнать дальше

Поздравляем с завершением нашего краткого руководства по основам RxJS. Теперь у вас есть инструменты для создания наблюдаемых объектов, использования общих создающих и конвейерных операторов, объединения их всех вместе с помощью функции pipe () .

Но это только снимок того, что может вам предложить RxJS. Вот некоторые промежуточные темы, которые вы можете решить:

• Предметы
• Трансформационные и комбинационные операторы
• Пользовательские операторы
• Интеграция событий DOM
• Реактивная обработка ошибок

Чтобы помочь вам понять эти сложные темы, компания Educative разработала Создание реактивных приложений с помощью RxJS . Этот курс полон интерактивных блоков кода и полных проектов кодирования, которые помогут вам получить практический опыт, необходимый для освоения RxJS. К концу вы будете обладать обширными навыками реактивного программирования для разработки собственных веб-приложений!

Читать далее о веб-приложениях

• Angular vs Vue vs React: выбор лучшего фреймворка в 2020 году
• Node.js vs React.js: какой выбрать для вашего проекта веб-приложения
• Build современные автономные приложения с прогрессивными веб-приложениями