Observable RxJS: cosa è, come si usa

Gli Observable RxJS sono degli oggetti molto utilizzati nelle applicazioni costruite con Angular.

Vengono impiegati principalmente per la comunicazione tra parti dell’applicazione.

Indice

Observable RxJS: cosa è

Gli Observable sono degli oggetti che consentono ad entità esterne di essere aggiornati in merito ai suoi cambiamenti di stato.

Un Observable implementa il noto design pattern observer.

Per essere informati in merito al cambiamento di stato di un Observable, è necessario effettuare una Subscription.

Ogni Observable può continuare ad emettere valori finché non viene chiamato il metodo complete().

Spesso gli Observable vengono divisi in Hot Observable e Cold Observable.

Nell’articolo RxJS: Hot Observables vs Cold Observables spiego quali siano i termini che caratterizzano ciascuna categoria.

Observable RxJS: esempio

In questa sezione viene riportato del codice che serve per comprendere l’utilizzo degli Observable in RxJS.

import { Observable } from 'rxjs';
const observable = new Observable((subscriber) => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});
console.log('prima della sottoscrizione');
observable.subscribe({
  next(x) {
    console.log('ho ricevuto il valore ' + x);
  },
  error(err) {
    console.error('errore: ' + err);
  },
  complete() {
    console.log('observable completato');
  },
});
console.log('dopo la sottoscrizione');

Il codice, se eseguito, produce il seguente risultato nella console del browser:

prima della sottoscrizione
ho ricevuto il valore 1
ho ricevuto il valore 2
ho ricevuto il valore 3
dopo la sottoscrizione
ho ricevuto il valore 4
observable completato

Observable RxJS in Angular

Gli Observable trovano largo utilizzo all’interno del framework Angular.

Ad esempio, sono utilizzati dal servizio HttpClient, utilizzato per effettuare chiamate AJAX.

Sono anche utilizzati nei ReactiveForm, per informare eventuali subscribers riguardo al cambiamento del valore del form.

Approfondimenti RxJS

In questo blog sono presenti numerosi articoli relativi a RxJS, ad Angular ed al Web Development.

Eccone alcuni:

Conclusioni

In questo articolo hai avuto modo di conoscere gli Observable di RxJS.

Se volessi approfondire l’argomento, puoi consultare la pagina ufficiale di documentazione della libreria.

Seguimi su