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 файл с сервака- обработал его операторами и вывел в тимплейт клиенту. ВСЁ!
Главное по больше практики и тогда поточность будет тебе казаться детским садиком!
Вот такие пироги!
