Реактивное программирование на JavaScript с помощью RxJS.

RxJS - это библиотека JavaScript для преобразования, составления и запроса асинхронных потоков данных. RxJS можно использовать как в браузере, так и на стороне сервера с помощью Node.js.

Я решил объяснить RxJS разработчикам в упрощенной форме. Самая сложная часть изучения RxJS - это «Реактивное мышление».

Думайте о RxJS как о «LoDash» для обработки асинхронных событий.

Итак, что же такое реактивное программирование?

Реактивное программирование - это парадигма программирования для написания кода, в основном связанная с асинхронными потоками данных. Просто другой способ создания программных приложений, которые будут «реагировать» на происходящие изменения, вместо типичного способа написания программного обеспечения, где мы явно пишем код (также известный как «императивное» программирование) для обработки этих изменений.

Транслировать

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

Stream испускает три вещи на своей временной шкале: значение, ошибку и сигнал завершения. Мы должны поймать это асинхронное событие и соответственно выполнить функции.

И обещания, и наблюдаемые созданы для решения проблем, связанных с асинхронностью (чтобы избежать «ада обратных вызовов»).

Типы асинхронных операций в современных веб-приложениях

События DOM- (события мыши, события касания, события клавиатуры, события формы и т. Д.)
Анимации - (переходы и анимация CSS, requestAnimationFrame и т. Д.)
AJAX
WebSockets
SSE - События, отправленные сервером
Альтернативные входы (голос, джойстик и т. Д.)

Если вы все еще не уверены, не волнуйтесь, обычно это не имеет особого смысла. Давайте начнем шаг за шагом.

Наблюдаемый

Observables обеспечивают поддержку передачи сообщений между издателями и подписчиками в вашем приложении.
Observables предлагают значительные преимущества по сравнению с другими методами обработки событий, асинхронного программирования и обработки нескольких значений.
Наблюдаемые ленивы. Он не начнет производить данные, пока вы на него не подпишетесь.
subscribe() возвращает подписку, по которой потребитель может unsubscribe() позвонить, чтобы отменить подписку и разорвать производителя.
RxJS предлагает ряд функций, которые можно использовать для создания новых наблюдаемых. Эти функции могут упростить процесс создания наблюдаемых из таких вещей, как события, таймеры, обещания и т. Д. Например:

Экземпляр Observable начинает публиковать значения только тогда, когда кто-то на него подписывается. Вы подписываетесь, вызывая subscribe() метод экземпляра, передавая объект observer для получения уведомлений.
Подписка имеет один важный метод unsubscribe(), который не принимает аргументов и просто удаляет ресурс, удерживаемый подпиской.

Наблюдатель

observer - это литерал объекта с функциями next(), error() и complete(). В приведенном выше примере наблюдатель - это литерал объекта, который мы передаем в наш метод .subscribe().
Когда Observable производит значения, он затем информирует наблюдателя, вызывая метод .next(), когда новое значение было успешно захвачено, и .error(), когда произошла ошибка.
Когда мы подписываемся на Observable, он будет передавать значения наблюдателю до полного сигнала.
Пример наблюдателя.

Операторы

Операторы - это функции, которые построены на основе Observables и позволяют выполнять сложные манипуляции с коллекциями.
Оператор - это, по сути, чистая функция, которая принимает один Observable в качестве входных данных и генерирует другой Observable в качестве выходных.
Существуют операторы для разных целей, и их можно разделить на следующие категории: создание, преобразование, фильтрация, комбинация, многоадресная рассылка, обработка ошибок, утилита и т. Д.
Операторы передают каждое значение от одного оператора к другому, прежде чем перейти к следующему значению в наборе. Это отличается от операторов массива (map и filter), которые обрабатывают весь массив на каждом шаге.
Например,

RxJS предоставляет множество операторов, но лишь некоторые из них используются часто. Список операторов и примеры использования можно найти в Документации RxJS API.

Тема

RxJS Subject - это особый тип Observable, который позволяет значениям быть многоадресными для многих Observers. В то время как обычные Observable являются одноадресными (каждый подписанный Observer владеет независимым выполнением Observable), Субъекты являются многоадресными.
Субъект в RxJS - это особый гибрид, который может одновременно выступать как Observable и Observer.
В приведенном ниже примере у нас есть два наблюдателя, прикрепленных к теме, и мы вводим некоторые значения в тему:

Наблюдаемое против обещания

Для лучшего понимания мы сравним ES6 Promise API с библиотекой Observable RxJS. Мы увидим, насколько похожи обещания и наблюдаемые объекты, а также чем они отличаются, и почему мы хотели бы использовать наблюдаемые объекты вместо обещаний в определенных ситуациях.

Одно значение или несколько значений

Если вы делаете запрос через обещание и ждете ответа. Вы можете быть уверены, что на один и тот же запрос не будет нескольких ответов. Вы можете создать обещание, которое разрешается с некоторым значением.
Обещание всегда разрешается первым значением, переданным в функцию разрешения, и игнорирует дальнейшие вызовы к нему.
Напротив, Observables позволяют разрешать несколько значений, пока мы не вызовем функцию observer.complete().
Пример обещания и наблюдаемости.

Нетерпеливый или ленивый

Обещания стремятся по дизайну, что означает, что обещание начнет выполнять любую задачу, которую вы ему дадите, как только будет вызван конструктор обещания.
Наблюдаемые ленивы. Конструктор Observable вызывается только тогда, когда кто-то фактически подписывается на Observable, что означает, что ничего не происходит, пока вы не подпишетесь на него.
Примеры,

Без возможности отмены или отмены

Одна из первых вещей, о которой часто задумываются пользователи нового обещания, - это как отменить обещание. Обещания ES6 пока не поддерживают отмену. Дело в том, что отмена - действительно важный сценарий в программировании на стороне клиента.
Используйте стороннюю библиотеку, например bluebird или axios, они предлагают функцию отмены обещаний.
Observable поддерживает отмену асинхронной задачи путем вызова метода unsubscribe() в Observable.
Когда вы подписываетесь на Observable, вы получаете обратно подписку, которая представляет текущее выполнение. Просто позвоните unsubscribe(), чтобы отменить выполнение.
Пример отменяемого наблюдаемого

Практические примеры

Создание наблюдаемых из значений

Создание наблюдаемых из потока значений

Наблюдается из событий DOM

Наблюдается из обещания

Наблюдается с помощью метода таймера

Наблюдается через интервал

Оператор карты

Do Operator

Debounce и Throttle

Debounce - Подождите X раз, затем дайте мне последнее значение.
Дроссельная заслонка - Дайте мне первое значение, затем подождите X раз.

bufferTime - собирает значения из прошлого в виде массива и периодически генерирует эти массивы во времени.

Заключение

Обещание лучше всего подходит для операций AJAX, где Observables чрезвычайно эффективны для обработки асинхронных задач. Observables предоставляют набор операторов для создания, преобразования, фильтрации и многоадресной рассылки асинхронных событий. Звучит здорово, не правда ли? : D

Заключительное примечание

Спасибо за прочтение. Надеюсь, вам понравилась эта статья, не стесняйтесь ставить лайк, комментировать или делиться этой статьей со своими друзьями. Для более глубокого понимания RxJS checkout предоставлены справочные ссылки.

Реактивное программирование на JavaScript с помощью RxJS.