A RxJS, un observable és una funció que s'utilitza per crear un observador i adjuntar-lo a la font d'on s'esperen valors. Per exemple, els clics, els esdeveniments del ratolí d'un element DOM o una sol·licitud Http, etc. són l'exemple d'observable.
En altres paraules, es pot dir que l'observador és un objecte amb funcions de devolució de trucada, que s'anomena quan hi ha interacció amb l'observable. Per exemple, la font ha interaccionat per exemple, clic al botó, Http petició, etc.
Els observables també es poden definir com a col·leccions Push mandrosos de diversos valors. Vegem un exemple senzill per entendre com s'utilitzen els observables per impulsar els valors.
Vegeu l'exemple següent:
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); }); A l'exemple anterior, hi ha un observable que impulsa els valors 10, 20, 30 de manera immediata i sincrònica quan s'ha subscrit, però el valor 40 s'enviarà al cap d'un segon des que s'hagi cridat el mètode de subscripció.
Si voleu invocar l'observable i veure els valors anteriors, us heu de subscriure. Vegeu l'exemple següent:
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'); Sortida:
Quan executem el programa anterior, tindrem el següent resultat a la consola:
Els observables són generalitzacions de funcions
Sabem que els observables són funcions que actuen com a clics, esdeveniments del ratolí des d'un element DOM o una sol·licitud Http, etc., però els observables no són com EventEmitters, ni són com Promises per a diversos valors. En alguns casos, els observables poden actuar com EventEmitters, és a dir, quan s'emeten en multidifusió mitjançant RxJS Subjects, però normalment, no actuen com EventEmitters.
Els observables són com funcions amb zero arguments, però generalitzeu-los per permetre diversos valors.
Vegem un exemple per entendre-ho clarament.
Un exemple senzill d'una funció:
algorisme de kruskals
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); Sortida:
llista doblement enllaçada
Veureu la sortida següent:
'Hello World!' 123 'Hello World!' 123
Escrivim el mateix exemple, però amb 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); }); Sortida:
Veureu la mateixa sortida que l'anterior:
Podeu veure això perquè tant les funcions com els observables són càlculs mandrosos. Si no crideu a la funció, console.log('Hola món!') no es produirà. A més, amb Observables, si no el 'truqueu' amb subscripció, el console.log('Hello World!') no passarà.
Treball d'un observable
Hi ha tres fases en un observable:
- Creació d'observables
- Subscripció a Observables
- Execució d'observables
Creació d'observables
Hi ha dues maneres de crear observables:
- Utilitzant el mètode del constructor observable
- Utilitzant el mètode Observable create().
Utilitzant el mètode del constructor observable
Creem un observable mitjançant el mètode del constructor observable i afegim un missatge, 'Aquest és el meu primer observable' mitjançant el mètode subscriber.next disponible dins d'Observable.
fitxer testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); També podeu crear Observable mitjançant el mètode Observable.create() de la següent manera:
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Subscripció a Observables
Subscriure's a un observable és com cridar una funció. Proporciona devolucions de trucada on es lliuraran les dades.
Podeu subscriure's a un observable utilitzant la sintaxi següent:
Sintaxi:
observable.subscribe(x => console.log(x));
Vegeu l'exemple anterior amb subscripció:
fitxer 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)); Sortida:
Execució d'observables
Un observable s'executa quan es subscriu. En general, hi ha tres mètodes en un observador que es notifica:
Pròxim(): Aquest mètode s'utilitza per enviar valors com un nombre, una cadena, un objecte, etc.
freddie mercury
completa (): Aquest mètode no envia cap valor. Indica que l'observable s'ha completat.
error(): Aquest mètode s'utilitza per notificar l'error si n'hi ha.
Vegem un exemple on hem creat l'observable amb les tres notificacions i executem aquest exemple:
fitxer 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ètode d'error només s'invoca si hi ha un error. Quan executeu el codi anterior, veureu la sortida següent a la consola.
Sortida:
