logo

Observabile RxJS

În RxJS, un observabil este o funcție care este utilizată pentru a crea un observator și pentru a-l atașa la sursa de la care sunt așteptate valori. De exemplu, clicurile, evenimentele mouse-ului dintr-un element DOM sau o solicitare Http etc. sunt exemplu de observabil.

Cu alte cuvinte, puteți spune că observatorul este un obiect cu funcții de apel invers, care este numit atunci când există interacțiune cu Observabil. De exemplu, sursa a interacționat pentru un exemplu, clic pe buton, Http cerere etc.

Observabilele pot fi, de asemenea, definite ca colecții Push leneșe de valori multiple. Să vedem un exemplu simplu pentru a înțelege cum sunt utilizate observabilele pentru a împinge valorile.

Vezi următorul exemplu:

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

În exemplul de mai sus, există un observabil care împinge valorile 10, 20, 30 imediat și sincron atunci când este abonat, dar valoarea 40 va fi împinsă după o secundă de la apelarea metodei de abonare.

cum să împerechezi căștile beats

Dacă doriți să invocați observabilul și să vedeți valorile de mai sus, trebuie să vă abonați la el. Vezi următorul exemplu:

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

Ieșire:

Când executăm programul de mai sus, vom avea următorul rezultat pe consolă:

Observabile RxJS

Observabilele sunt generalizări ale funcțiilor

Știm că observabilele sunt funcții care acționează ca clicuri, evenimente de mouse dintr-un element DOM sau o solicitare Http, etc. dar observabilele nu sunt ca EventEmitters și nici nu sunt ca Promises pentru mai multe valori. În unele cazuri, observabilele pot acționa ca EventEmitters, și anume atunci când sunt transmise multicast folosind RxJS Subjects, dar, de obicei, nu acționează ca EventEmitters.

Observabilele sunt ca funcțiile cu zero argumente, dar generalizează-le pentru a permite mai multe valori.

Să vedem un exemplu pentru a înțelege acest lucru clar.

Un exemplu simplu de funcție:

instanțiere în java
 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); 

Ieșire:

Veți vedea următoarea ieșire:

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

Să scriem același exemplu, dar cu observabile:

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

Ieșire:

Veți vedea aceeași ieșire ca mai sus:

Observabile RxJS

Puteți vedea acest lucru deoarece atât funcțiile, cât și Observabilele sunt calcule leneșe. Dacă nu apelați funcția, console.log('Hello World!') nu se va întâmpla. De asemenea, cu Observables, dacă nu îl „apelați” cu subscribe, console.log(„Hello World!”) nu se va întâmpla.

Funcționarea unui observabil

Există trei faze într-un observabil:

comandă grep în linux
  • Crearea observabilelor
  • Abonarea la Observables
  • Executarea observabilelor

Crearea observabilelor

Există două moduri de a crea observabile:

  • Folosind metoda constructorului Observable
  • Folosind metoda Observable create().

Folosind metoda constructorului Observable

Să creăm un observabil folosind metoda constructorului observabil și să adăugăm un mesaj, „Acesta este primul meu observabil” folosind metoda subscriber.next disponibilă în Observable.

fișier testrx.js:

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

De asemenea, puteți crea Observable folosind metoda Observable.create() după cum urmează:

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

Abonarea la Observables

Abonarea la un observabil este ca și cum ai apela o funcție. Oferă apeluri înapoi la care vor fi livrate datele.

Vă puteți abona la un observabil folosind următoarea sintaxă:

Sintaxă:

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

Vezi exemplul de mai sus cu abonare:

k algoritm de grupare

fișier 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)); 

Ieșire:

Observabile RxJS

Executarea observabilelor

Un observabil este executat atunci când este subscris. Există, în general, trei metode într-un observator care sunt notificate:

șir în matrice în c

Următorul(): Această metodă este folosită pentru a trimite valori precum un număr, șir, obiect etc.

complet(): Această metodă nu trimite nicio valoare. Indică faptul că observabilul este finalizat.

eroare(): Această metodă este utilizată pentru a notifica eroarea, dacă există.

Să vedem un exemplu în care am creat observabilul cu toate cele trei notificări și să executăm acel exemplu:

fișier 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 de eroare este invocată numai dacă există o eroare. Când rulați codul de mai sus, veți vedea următoarea ieșire în consolă.

Ieșire:

Observabile RxJS