logo

RxJS Observables

V RxJS je observable funkcija, ki se uporablja za ustvarjanje opazovalca in njegovo pripenjanje k viru, od koder se pričakujejo vrednosti. Na primer, kliki, dogodki miške iz elementa DOM ali zahteve Http itd. so primeri opazovanega.

Z drugimi besedami, lahko rečete, da je opazovalec objekt s funkcijami povratnega klica, ki se pokliče, ko pride do interakcije z Observable. Na primer, vir je medsebojno vplival na primer, klik gumba, Http zahteva itd.

Observables lahko definiramo tudi kot lene potisne zbirke več vrednosti. Oglejmo si preprost primer, da razumemo, kako se opazovalne vrednosti uporabljajo za potiskanje vrednosti.

Oglejte si naslednji primer:

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

V zgornjem primeru obstaja opazovalka, ki potisne vrednosti 10, 20, 30 takoj in sinhrono, ko je naročena, vendar bo vrednost 40 potisnjena po eni sekundi od klica metode subscribe.

Če želite priklicati observable in videti zgornje vrednosti, se morate nanj naročiti. Oglejte si naslednji primer:

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

Izhod:

Ko izvedemo zgornji program, bomo na konzoli dobili naslednji rezultat:

RxJS Observables

Opazljive so posplošitve funkcij

Vemo, da so observable funkcije, ki delujejo kot kliki, dogodki miške iz elementa DOM ali zahteve Http itd., vendar observables niso kot EventEmitters, niti niso kot Promises za več vrednosti. V nekaterih primerih se lahko opazovalci obnašajo kot EventEmitters, in sicer ko so multicast z uporabo RxJS Subjects, vendar običajno ne delujejo kot EventEmitters.

Opazljive so kot funkcije z nič argumenti, vendar jih posplošite, da omogočite več vrednosti.

Oglejmo si primer, da to jasno razumemo.

Preprost primer funkcije:

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

Izhod:

Videli boste naslednje rezultate:

 'Hello World!' 123 'Hello World!' 123 

Napišimo isti primer, vendar z opazovalkami:

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

Izhod:

Videli boste enak rezultat kot zgoraj:

RxJS Observables

To lahko vidite, ker so tako funkcije kot Observable leni izračuni. Če funkcije ne pokličete, se console.log('Hello World!') ne bo zgodil. Poleg tega se pri Observables, če ne 'pokličete' s subscribe, console.log('Hello World!') ne bo zgodil.

Delovanje observable

Observable ima tri faze:

aes proti des
  • Ustvarjanje opazovanih
  • Naročanje na Observables
  • Izvajanje opazovanih

Ustvarjanje opazovanih

Observable lahko ustvarite na dva načina:

  • Uporaba metode konstruktorja Observable
  • Uporaba metode Observable create().

Uporaba metode konstruktorja Observable

Ustvarimo observable z metodo konstruktorja observable in dodamo sporočilo 'To je moj prvi Observable' z uporabo metode subscriber.next, ki je na voljo znotraj Observable.

datoteka testrx.js:

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

Observable lahko ustvarite tudi z metodo Observable.create() na naslednji način:

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

Naročanje na Observables

Naročanje na opazljivo je kot klic funkcije. Omogoča povratne klice, kam bodo podatki dostavljeni.

Na observable se lahko naročite z naslednjo sintakso:

Sintaksa:

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

Oglejte si zgornji primer z naročnino:

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

Izhod:

RxJS Observables

Izvajanje opazovanih

Observable se izvede, ko je naročen. V opazovalcu so na splošno na voljo trije načini obveščanja:

Naslednji(): Ta metoda se uporablja za pošiljanje vrednosti, kot so število, niz, predmet itd.

java naštevanja

popoln(): Ta metoda ne pošilja nobene vrednosti. Označuje, da je opazovana končana.

napaka(): Ta metoda se uporablja za obveščanje o morebitni napaki.

Oglejmo si primer, kjer smo ustvarili observable z vsemi tremi obvestili in izvedli ta primer:

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

Metoda napake se prikliče le, če pride do napake. Ko zaženete zgornjo kodo, boste v konzoli videli naslednji izpis.

Izhod:

RxJS Observables