logo

RxJS Observables

I RxJS er en observerbar en funksjon som brukes til å lage en observatør og knytte den til kilden der verdier forventes fra. For eksempel er klikk, musehendelser fra et DOM-element eller en Http-forespørsel osv. eksempler på observerbare.

Med andre ord kan du si at observer er et objekt med tilbakeringingsfunksjoner, som kalles når det er interaksjon med det observerbare. For eksempel har kilden samhandlet for et eksempel, knappeklikk, Http forespørsel osv.

Observerbare kan også defineres som late Push-samlinger med flere verdier. La oss se et enkelt eksempel for å forstå hvordan observerbare objekter brukes til å presse verdiene.

Se følgende eksempel:

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

I eksemplet ovenfor er det en observerbar som skyver verdiene 10, 20, 30 umiddelbart og synkront når du abonnerer, men verdien 40 vil bli presset etter ett sekund siden abonneringsmetoden har kalt.

Hvis du vil påkalle det observerbare og se verdiene ovenfor, må du abonnere på det. Se følgende eksempel:

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

Produksjon:

Når vi kjører programmet ovenfor, får vi følgende resultat på konsollen:

RxJS Observables

Observerbare er generaliseringer av funksjoner

Vi vet at observerbare er funksjoner som fungerer som klikk, musehendelser fra et DOM-element eller en Http-forespørsel, etc., men observerbare er ikke som EventEmitters, og de er heller ikke som løfter for flere verdier. I noen tilfeller kan observerbare opptre som EventEmitters, nemlig når de multicastes ved hjelp av RxJS Subjects, men vanligvis oppfører de seg ikke som EventEmitters.

Observerbare er som funksjoner med null argumenter, men generaliser dem for å tillate flere verdier.

La oss se et eksempel for å forstå dette tydelig.

Et enkelt eksempel på en funksjon:

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

Produksjon:

Du vil se følgende utgang:

hvordan konvertere et heltall til en streng i java
 'Hello World!' 123 'Hello World!' 123 

La oss skrive det samme eksemplet, men med 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); }); 

Produksjon:

Du vil se samme utgang som ovenfor:

RxJS Observables

Du kan se dette fordi både funksjoner og observerbare er late beregninger. Hvis du ikke kaller opp funksjonen, vil ikke console.log('Hello World!') skje. Dessuten, med Observables, hvis du ikke 'ringer' det med abonner, vil ikke console.log('Hello World!') skje.

Arbeid av en observerbar

Det er tre faser i en observerbar:

  • Opprette observerbare
  • Abonner på Observables
  • Utføre observerbare

Opprette observerbare

Det er to måter å lage observerbare på:

  • Bruke Observable constructor-metoden
  • Bruker Observable create()-metoden

Bruke Observable constructor-metoden

La oss lage en observerbar ved å bruke den observerbare konstruktørmetoden og legge til en melding 'This is my first Observable' ved å bruke subscriber.next-metoden tilgjengelig i Observable.

testrx.js fil:

 import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Du kan også opprette Observable ved å bruke Observable.create()-metoden som følger:

 import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); 

Abonner på Observables

Å abonnere på en observerbar er som å kalle en funksjon. Det gir tilbakeringinger der dataene skal leveres til.

Du kan abonnere på en observerbar ved å bruke følgende syntaks:

sql velg som

Syntaks:

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

Se eksemplet ovenfor med abonner:

testrx.js fil:

 import { Observable } from 'rxjs'; var observer = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); observer.subscribe(x => console.log(x)); 

Produksjon:

RxJS Observables

Utføre observerbare

En observerbar blir utført når den abonneres. Det er generelt tre metoder i en observatør som blir varslet:

neste(): Denne metoden brukes til å sende verdier som et tall, streng, objekt osv.

fullstendig(): Denne metoden sender ingen verdi. Det indikerer at det observerbare er fullført.

feil(): Denne metoden brukes til å varsle om feilen.

La oss se et eksempel der vi har laget det observerbare med alle tre varslene og utfører det eksemplet:

testrx.js fil:

 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.')); 

Feilmetoden påkalles bare hvis det er en feil. Når du kjører koden ovenfor, vil du se følgende utgang i konsollen.

Produksjon:

RxJS Observables