RxJS - Observables

Un observable es una función que crea un observador y lo adjunta a la fuente donde se esperan los valores, por ejemplo, clics, eventos de mouse de un elemento dom o una solicitud Http, etc.

Observer is an object with callback functions, que se llamará cuando haya interacción con el Observable, es decir, la fuente ha interactuado para un clic de botón de ejemplo, solicitud Http, etc.

Vamos a discutir los siguientes temas en este capítulo:

• Crear observable
• Suscribirse Observable
• Ejecutar Observable

Crear observable

El observable se puede crear usando el constructor observable y también usando el método de creación observable y pasando la función de suscripción como un argumento como se muestra a continuación:

testrx.js

import { Observable } from 'rxjs';

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

Creamos un observable y agregamos un mensaje "Mi primer observable" usando subscriber.next método disponible dentro de Observable.

También podemos crear Observable usando el método Observable.create () como se muestra a continuación:

testrx.js

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

Suscribirse Observable

Puede suscribirse a un observable de la siguiente manera:

testrx.js

import { Observable } from 'rxjs';

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

Cuando el observador esté suscrito, iniciará la ejecución del Observable.

Esto es lo que vemos en la consola del navegador:

Ejecutar Observable

Un observable se ejecuta cuando se suscribe. Un observador es un objeto con tres métodos que se notifican,

next() - Este método enviará valores como un número, cadena, objeto, etc.

complete() - Este método no enviará ningún valor e indica el observable como completado.

error() - Este método enviará el error si lo hay.

Creemos lo observable con las tres notificaciones y ejecutemos lo mismo.

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"));

En el código anterior, hemos agregado, siguiente, completo y método de error.

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

Para ejecutar next, complete y error, tenemos que llamar al método subscribe como se muestra a continuación:

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

El método de error se invocará solo si hay un error.

Esta es la salida que se ve en el navegador: