Javascript (Rxjs): наблюдаемые

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

Что такое Observable?

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

В концепции Observable есть три ключевых термина: наблюдаемый, наблюдатель и подписка. Знание этих терминов облегчит вам понимание других терминов, связанных с наблюдаемыми.

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

Аналогия не очень точна, наблюдаемые более сложны. Но ладно, для начала...

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

Я надеюсь, что эти термины теперь немного ясны.

Как создать объект наблюдения и подписаться на него?

Чтобы наблюдаемое работало, на него нужно подписаться…..

// creating the observable
var observable = Rx.Observable.create((observer) => 
  observer.next('The food truck has arrived')
}) 

// To make an observable work, we need to subscribe it

// According to our analogy, subscribing is telling the watchman 
// to notify us when the food truck arrives

observable.subscribe((data)=>{
   console.log(data);    
})

/*
    Output is:
    The food truck has arrived
*/

Существует три типа значений, которые наблюдатель может передать подписчику:
- observer.next(): Функция .next() передает значение подписчику, и ее можно использовать для передачи нескольких значений подписчику.
-Observer.complete(): После вызова .complete( ), подписчик больше не может передавать значения наблюдаемому объекту.
-Observer.error(): Функция .error() используется для обработки ошибок.

Рассмотрим применение каждой из этих функций на примере:

// creating an observable
var observable = Rx.Observable.create((observer) => {
  try{
    // pushing the value inside observable using
    observer.next('start');
  
    setTimeout(()=>{
       observer.next('from setTimeout')
    },1000)
  
    observer.complete();

    // This line will not be executed as the complete notification
    // is already being sent...
    observer.next('after complete')

  } catch(error) {
    // This line will be executed only if an error occurs
    observer.error(error)
  }
}) 

// To make an observable work, we need to subscribe to it :

observable.subscribe((data)=>{
   console.log(data);    
})

/** 
    Output is: 
    start
    from setTimeout
**/

Здесь .next() помещает значение в наблюдаемое. Однако значения больше не передаются в наблюдаемый объект после вызова .complete()/.error().

Поскольку мы разобрались с основами, теперь мы можем обсудить технические термины и определение наблюдаемой. Наблюдаемое является частью библиотеки Rxjs (реактивное расширение для javascript), которая представляет собой не что иное, как реактивное программирование. А Реактивное программирование — это программирование с использованием асинхронных потоков данных.

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

Я знаю, что приведенные выше утверждения не имеют для вас особого смысла, но давайте разберемся в них, рассмотрев примеры из реальной жизни.
- Нажатия клавиш или движение курсора являются примером асинхронного потока данных (поток данных из нескольких событий за определенный период времени).
 – HTTP-запрос является примером асинхронного потока данных (потока данных одного события).

Операторы в Rxjs

Библиотека Rxjs также предоставляет различные операторы (функции) для манипулирования, фильтрации или изменения выходных данных наблюдаемых. Это делает эту библиотеку мощной и популярной. Существует два основных типа операторов: операторы создания и конвейерные операторы.

Что такое операторы создания?

Операторы создания — это функции, которые можно использовать для создания Observable с некоторым общим предопределенным поведением или путем присоединения к другим Observable.
Их называют автономными методами, создающими новые Observable. Из предыдущих примеров .next() также является
Например: of() — это оператор создания, который создает Observables из любых данных, будь то строка, массив, объект или даже обещание. .

import { of, map } from 'rxjs';

// Here of() operator converts the group of numbers into observable
const observable = of(1, 2, 3)

observable.subscribe(data => console.log(data));

/*
  Output is:
  1
  2
  3

*/

Что такое конвейерные операторы?
Конвейерные операторы — это операторы, которые могут быть переданы в Observables с использованием синтаксисаobservableInstance.pipe(operator()). Конвейерный оператор — это функция, которая принимает одно наблюдаемое в качестве входных данных и генерирует другое наблюдаемое в качестве выходных данных. Различные операторы каналов включают map(), pluck() и т. д. Например, оператор map() определен в канале, где вы можете изменить содержимое выдаваемых значений из одного наблюдаемого объекта, чтобы сформировать другой новый наблюдаемый объект.

import { of, map } from 'rxjs';

const observable = of('The food truck has arrived');
observable.pipe(map(data => data.toUpperCase()))

observable.subscribe(data => console.log(data));

/*
  Output is:
  THE FOOD TRUCK HAS ARRIVED
*/

С помощью библиотеки Rxjs вы можете преобразовать практически все в наблюдаемые объекты, которые затем можно фильтровать, изменять или манипулировать в соответствии с требованиями.

Я надеюсь, что после прочтения этого блога у вас есть общее представление о Rxjs Observable. Чтобы узнать больше о Rxjs, вы можете обратиться к документации https://rxjs.dev/guide/overview.

В следующем блоге я расскажу, чем наблюдаемые объекты отличаются от обещаний и почему наблюдаемые лучше обещаний.

А пока будьте счастливы и оставайтесь здоровыми!!!!!
Кроме того, не стесняйтесь комментировать ниже, если у вас есть какие-либо сомнения или предложения…..