RxJs для самых маленьких

Зачастую новичкам сложно понять тему потоков, особенно когда ты и так работаешь со сложным инструментом типа Ангуляр! В этой статье моя задача состоит в том чтобы к концу ее прочтения даже самый далекий человек от программирования понял принцип поточности! Поехали!

Вот что написано в документации

RxJS (Reactive Extensions for JavaScript) — это библиотека для реактивного программирования, которая позволяет работать с асинхронными данными, используя Observable последовательности. RxJS предоставляет мощные операторы для создания, комбинирования и обработки потоков данных.

Давай разберемся по пунктам и начнем с того что такое асинхронные данные!

Асинхронные данные — это данные, которые мы получаем с задержкой.
Представь, что ты заказываешь пиццу по телефону. Сначала ты делаешь заказ, а потом ждёшь, пока пиццу приготовят и доставят. В это время ты можешь делать другие дела. Когда пицца готова, тебе звонят, и ты её получаешь. В программировании, когда мы запрашиваем данные, например, с сервера, мы можем сразу не получить ответ. Пока данные приходят, программа может продолжать выполнять другие задачи. Когда данные будут готовы, мы их получим и обработаем.

Пример:

Объясняю что только что произошло: Метод of принимает на вход любое количество аргументов и возвращает готовый экземпляр Observable. После подписки он испустит полученные значения и завершится. А теперь пройдемся по каждому пункту этого академического пояснения как я и обещал для самых маленьких!

1. Observable — это объект, который представляет поток данных с течением времени. Этот поток данных можно рассматривать как последовательность событий или значений, которые передаются асинхронно. Объект Observable предоставляет возможность подписаться на этот поток данных( в данном примере это «Данные получены») и получать уведомления о новых событиях или значениях.

Observables полезны для моделирования широкого спектра асинхронных источников данных, таких как пользовательский ввод, сетевые запросы и таймеры.

В RxJS Observables создаются с помощью Observableконструктора или одного из многих методов статического создания.of, from, и interval. Ими можно манипулировать с помощью широкого спектра операторов, таких какmap, filter, и mergeMap, и на них можно подписаться с помощью subscribeметода. Но обо всем по порядку.

.pipe() — Метод вызывается у объекта, а операторы передаются ему в качестве аргументов через запятую в порядке их вызова. Тоесть в нашем примере мы передали в функция pipe оператор- delay, он что-то делает с нашей строкой( об этом позже) и дальше отдает полученное значение подписчику. Этих оператором в pipe может быть много- этакая оболочка для них!

.subscribe() — Дальше идет как вы уже догадались подписка на получение данных! Проще говоря, .subscribe() используется для начала прослушивания данных, передаваемых Observable, .subscribe() метод принимает один или несколько аргументов в качестве функций обратного вызова, которые вызываются при получении новых данных. В нашем примере мы передали 1 аргумент функцию консоль лог и вывели строку «Данные получены» в консоль. Как видишь не чего сложного!

Операторы. Давай теперь поговорим немного о них, собственно ради чего это все затевалось! Приведу теперь пример по сложнее:

Прочитай внимательно код! Особенно комментарии в нем!
В итоге, через 3 секунды после запуска кода, в окне alert будет выведено сообщение «Обработка: Дополнительные данные».

Вот еще дюжина самых популярных операторов с разделением по категориям:

• Создания (of, from, fromEvent, interval);

• Преобразования (map, scan, buffer);

• Фильтрации (filter, take, skip, distinct);

• Обработки ошибок (catchError, retry, onErrorResumeNext);

• Условия (skipUntil, skipWhile, takeUntil, takeWhile);

• Математические (min, max, count);

• Утилиты (tap, delay);

• Для Connectable Observable (share, shareReplay, publish).

Так же забегая в перед для более продвинутых дядек но не совсем, хочу вставить одну важную ремарку касаемо subscribe. Про первый аргумент мы уже поговорили теперь расскажу об остальных двух — потому что это очень важно знать.
Второй аргумент (необязательный) — это функция-обработчик, которая будет вызываться в случае, если в потоке Observable произойдет ошибка. Эта функция принимает один аргумент — объект ошибки.!
Третий аргумент (необязательный) — это функция-обработчик, которая будет вызываться в конце потока Observable, когда он завершится успешно или с ошибкой.

Как видишь сложного тут не чего нет! Основная идея это сделать что-то асинхронное- в основном это запросы на сервер, потом дождаться когда данные придут к нам в тело Observable и потом вертеть этими данными как нам захочется с помощью мощной библиотеке операторов предоставляемой RxJs. Например дождался JSON файл с сервака- обработал его операторами и вывел в тимплейт клиенту. ВСЁ!

Главное по больше практики и тогда поточность будет тебе казаться детским садиком!

Вот такие пироги!