RxJS - наблюдаемые

Наблюдаемый - это функция, которая создает наблюдателя и прикрепляет его к источнику, где ожидаются значения, например, от щелчков, событий мыши от элемента dom или запроса Http и т. Д.

Observer is an object with callback functions, который будет вызываться при взаимодействии с Observable, т. е. когда источник взаимодействовал для примера нажатия кнопки, запроса Http и т. д.

В этой главе мы собираемся обсудить следующие темы -

  • Создать наблюдаемый
  • Подписаться Наблюдаемый
  • Выполнить наблюдаемый

Создать наблюдаемый

Наблюдаемый объект может быть создан с использованием наблюдаемого конструктора, а также с использованием наблюдаемого метода создания и путем передачи ему функции подписки в качестве аргумента, как показано ниже -

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Мы создали наблюдаемый и добавили сообщение «Моя первая наблюдаемая», используя subscriber.next доступный внутри Observable.

Мы также можем создать Observable, используя метод Observable.create (), как показано ниже -

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Подписаться Наблюдаемый

Вы можете подписаться на наблюдаемое следующим образом -

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

Когда наблюдатель подписан, он начнет выполнение Observable.

Это то, что мы видим в консоли браузера -

Выполнить наблюдаемый

Наблюдаемый объект запускается при подписке. Наблюдатель - это объект с тремя методами, которые уведомляются:

next() - Этот метод отправляет значения, такие как число, строка, объект и т. Д.

complete() - Этот метод не отправляет никакого значения и указывает наблюдаемое как завершенное.

error() - Этот метод отправит ошибку, если таковая имеется.

Давайте создадим наблюдаемый со всеми тремя уведомлениями и выполним то же самое.

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

В приведенном выше коде мы добавили метод next, complete и error.

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

Чтобы выполнить next, complete и error, мы должны вызвать метод подписки, как показано ниже -

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

Метод ошибки будет вызван только в случае ошибки.

Это результат, видимый в браузере -