En RxJS, un observable es una función que se utiliza para crear un observador y adjuntarlo a la fuente de donde se esperan los valores. Por ejemplo, los clics, los eventos del mouse de un elemento DOM o una solicitud Http, etc. son ejemplos de observables.
En otras palabras, se puede decir que el observador es un objeto con funciones de devolución de llamada, que se llama cuando hay interacción con el Observable. Por ejemplo, la fuente ha interactuado por ejemplo, haciendo clic en un botón, http solicitud, etc
Los observables también se pueden definir como colecciones Push diferidas de múltiples valores. Veamos un ejemplo sencillo para comprender cómo se utilizan los observables para impulsar los valores.
Vea el siguiente ejemplo:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); En el ejemplo anterior, hay un observable que envía los valores 10, 20, 30 de forma inmediata y sincrónica cuando se suscribe, pero el valor 40 se enviará después de un segundo desde que se llamó al método de suscripción.
Si desea invocar el observable y ver los valores anteriores, debe suscribirse. Vea el siguiente ejemplo:
import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(10); subscriber.next(20); subscriber.next(30); setTimeout(() => { subscriber.next(40); subscriber.complete(); }, 1000); }); console.log('These are the values just before subscribe'); observable.subscribe({ next(x) { console.log('We have got value ' + x); }, error(err) { console.error('something wrong occurred: ' + err); }, complete() { console.log('Done successfully'); } }); console.log('This value is just after subscribe'); Producción:
Cuando ejecutamos el programa anterior, obtendremos el siguiente resultado en la consola:
Los observables son generalizaciones de funciones.
Sabemos que los observables son funciones que actúan como clics, eventos del mouse desde un elemento DOM o una solicitud Http, etc. pero los observables no son como EventEmitters, ni como Promesas para múltiples valores. En algunos casos, los observables pueden actuar como EventEmitters, es decir, cuando se transmiten mediante multidifusión utilizando sujetos RxJS, pero normalmente no actúan como EventEmitters.
Los observables son como funciones con cero argumentos, pero los generalizan para permitir múltiples valores.
estampado de estrellas
Veamos un ejemplo para entender esto claramente.
Un ejemplo simple de una función:
function foo() { console.log('Hello World!'); return 123; } const x = foo.call(); // same as foo() console.log(x); const y = foo.call(); // same as foo() console.log(y); Producción:
Verá el siguiente resultado:
'Hello World!' 123 'Hello World!' 123
Escribamos el mismo ejemplo, pero con Observables:
import { Observable } from 'rxjs'; const foo = new Observable(subscriber => { console.log('Hello World!'); subscriber.next(123); }); foo.subscribe(x => { console.log(x); }); foo.subscribe(y => { console.log(y); }); Producción:
Verá el mismo resultado que el anterior:
Puedes ver esto porque tanto las funciones como los Observables son cálculos perezosos. Si no llama a la función, console.log('Hello World!') no sucederá. Además, con Observables, si no lo 'llamas' con suscripción, el archivo console.log('Hello World!') no sucederá.
Funcionamiento de un observable
Hay tres fases en un observable:
- Creando observables
- Suscribirse a observables
- Ejecutando observables
Creando observables
Hay dos formas de crear observables:
- Usando el método constructor observable
- Usando el método crear () observable
Usando el método constructor observable
Creemos un observable usando el método constructor observable y agreguemos un mensaje, 'Este es mi primer Observable' usando el método subscriber.next disponible dentro de Observable.
unión izquierda vs unión derecha
Archivo testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); También puede crear Observable utilizando el método Observable.create() de la siguiente manera:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Suscribirse a observables
Suscribirse a un observable es como llamar a una función. Proporciona devoluciones de llamada a dónde se entregarán los datos.
Puede suscribirse a un observable utilizando la siguiente sintaxis:
Sintaxis:
observable.subscribe(x => console.log(x));
Vea el ejemplo anterior con suscripción:
Archivo testrx.js:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); Producción:
Ejecutando observables
Un observable se ejecuta cuando está suscrito. Generalmente hay tres métodos en un observador que se notifica:
próximo(): Este método se utiliza para enviar valores como un número, cadena, objeto, etc.
dividido por cadena java
completo(): Este método no envía ningún valor. Indica que el observable está completo.
error(): Este método se utiliza para notificar el error, si lo hubiera.
Veamos un ejemplo donde hemos creado el observable con las tres notificaciones y ejecutamos ese ejemplo:
Archivo testrx.js:
import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { try { subscriber.next('This is 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 completed now.')); El método de error se invoca sólo si hay un error. Cuando ejecute el código anterior, verá el siguiente resultado en la consola.
Producción:
