In RxJS, un osservabile è una funzione utilizzata per creare un osservatore e collegarlo alla fonte da cui sono attesi i valori. Ad esempio, i clic, gli eventi del mouse da un elemento DOM o una richiesta Http, ecc. sono un esempio di osservabile.
In altre parole, puoi dire che Observer è un oggetto con funzioni di callback, che viene chiamato quando c'è interazione con l'Observable. Ad esempio, la fonte ha interagito per un esempio, facendo clic sul pulsante, HTTP richiesta, ecc.
Gli osservabili possono anche essere definiti come raccolte Push pigre di più valori. Vediamo un semplice esempio per capire come vengono utilizzati gli osservabili per spingere i valori.
Vedere l'esempio seguente:
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); }); Nell'esempio sopra, c'è un osservabile che invia i valori 10, 20, 30 immediatamente e in modo sincrono quando viene iscritto, ma il valore 40 verrà inviato dopo un secondo da quando il metodo di iscrizione ha chiamato.
Se vuoi invocare l'osservabile e vedere i valori di cui sopra, devi iscriverti ad esso. Vedere l'esempio seguente:
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'); Produzione:
Quando eseguiamo il programma sopra, avremo il seguente risultato sulla console:
Le osservabili sono generalizzazioni di funzioni
Sappiamo che gli osservabili sono funzioni che agiscono come clic, eventi del mouse da un elemento DOM o una richiesta Http, ecc. Ma gli osservabili non sono come EventEmitters, né sono come Promesse per valori multipli. In alcuni casi, gli osservabili possono agire come EventEmitters, vale a dire quando vengono trasmessi in multicast utilizzando soggetti RxJS, ma di solito non si comportano come EventEmitters.
Gli osservabili sono come funzioni con zero argomenti, ma generalizzano per consentire più valori.
Vediamo un esempio per capirlo chiaramente.
Un semplice esempio di funzione:
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); Produzione:
Vedrai il seguente output:
'Hello World!' 123 'Hello World!' 123
Scriviamo lo stesso esempio, ma 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); }); Produzione:
Vedrai lo stesso output di sopra:
Puoi vederlo perché sia le funzioni che gli osservabili sono calcoli pigri. Se non chiami la funzione, console.log('Hello World!') non si verificherà. Inoltre, con Observables, se non lo 'chiami' con la sottoscrizione, console.log('Hello World!') non si verificherà.
Funzionamento di un osservabile
Ci sono tre fasi in un osservabile:
media vs media
- Creazione di osservabili
- Iscrizione a Observables
- Esecuzione di osservabili
Creazione di osservabili
Esistono due modi per creare oggetti osservabili:
- Utilizzando il metodo del costruttore osservabile
- Utilizzando il metodo Observable create()
Utilizzando il metodo del costruttore osservabile
Creiamo un osservabile utilizzando il metodo del costruttore osservabile e aggiungiamo un messaggio, 'Questo è il mio primo osservabile' utilizzando il metodo Subscriber.next disponibile all'interno di Observable.
File testrx.js:
import { Observable } from 'rxjs'; var observable = new Observable( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Puoi anche creare Observable utilizzando il metodo Observable.create() come segue:
siti web di film simili a 123movies
import { Observable } from 'rxjs'; var observer = Observable.create( function subscribe(subscriber) { subscriber.next('This is my first Observable') } ); Iscrizione a Observables
Iscriversi a un osservabile è come chiamare una funzione. Fornisce callback a cui verranno consegnati i dati.
È possibile iscriversi a un osservabile utilizzando la seguente sintassi:
Sintassi:
observable.subscribe(x => console.log(x));
Vedi l'esempio sopra con la sottoscrizione:
File 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)); Produzione:
Esecuzione di osservabili
Un osservabile viene eseguito quando viene sottoscritto. Ci sono generalmente tre metodi in un osservatore che viene notificato:
Prossimo(): Questo metodo viene utilizzato per inviare valori come un numero, una stringa, un oggetto ecc.
completare(): Questo metodo non invia alcun valore. Indica che l'osservabile è completato.
errore(): Questo metodo viene utilizzato per notificare l'eventuale errore.
Vediamo un esempio in cui abbiamo creato l'osservabile con tutte e tre le notifiche ed eseguiamo l'esempio:
File 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.')); Il metodo error viene richiamato solo se si verifica un errore. Quando esegui il codice precedente, vedrai il seguente output nella console.
Produzione:
