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.

Observable RxJS vs Promise JavaScript

Gli Observable sono spesso utilizzati per la gestione delle operazioni asincrone, come le Promise di JavaScript.

Se non sapessi cosa siano le Promise di JavaScript, puoi approfondire leggendo l’articolo Promise JavaScript: definizione ed esempio pratico.

Grazie a questa somiglianza, quando si utilizza un framework che fa uso di RxJS, si sceglie di convertire le Promise in Observable.

RxJS mette a disposizione l’operatore from che può prendere come input una Promise e ritornare un Observable che emetterà il valore emesso dalla Promise.

Puoi trovare un esempio dell’applicazione dell’operatore from su learnrxjs.io.