Introduzione RXJS – parte 2: Observable

Home/code/javascript/Introduzione RXJS – parte 2: Observable

Introduzione RXJS – parte 2: Observable

RxJS introduce invece il concetto di Observable, un sistema “Push” che al contrario delle Promise:

1) può ricevere, nel tempo, più di un valore;

2) non termina dopo la prima emissione di valori, ma continua ad emettere dati nel tempo, anche all’infinito.

Il costruttore di un Observable può ricevere un solo argomento: la funzione subscribe, nella quale definiamo il suo funzionamento, ovvero emetteremo dei valori, eventuali errori e completeremo l’Observable quando non sarà più necessario emettere valori.

Tramite la funzione next() potremo emettere dei valori in tale Observable:

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  subscriber.next(10);
  subscriber.next(20);
}); 

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

Nell’esempio seguente creiamo un nuovo Observable e emettiamo un valore random ogni secondo.
Sottoscriviamo, quindi l”Observable con la funzione subscribe e visualizziamo in console ogni valore emesso.

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
  const id = setInterval(() => {
    subscriber.next(Math.random())
  }, 1000);
}); 

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

Sottoscrivere un Observable è una procedura molto simile alla gestione di una callback generata da una Promise o un evento, solo che invece di utilizzare il metodo then() o addEventListener, si utilizza subscribe(), che ha il compito di avviare l’esecuzione dell’Observable e restituire i valori di tale esecuzione all’Observer.

Una nota: spesso un Observable non è creato manualmente tramite la creazione di una istanza (new Observable()) ma attraverso degli operatori chiamati “di creazione”, come:

  • of(1, 2, 3): emette tre valori sincroni 1, 2, 3
  • fromEvent(document, 'click'): emette un valore al click
  • interval(1000): emette un valore incrementale da 0 a N ogni secondo …

Se utilizzi Angular, avrai notato che il servizio HttpClient (quando effettuiamo un http.get), i Reactive Forms, gli eventi del Router, gli interceptor, gli @Output EventEmitter sono esposti sotto forma di Observable e possono essere sottoscritti. Avrai anche visto un ampio uso del metodo pipe e degli operatori RxJS , quindi comprendere bene i concetti alla base della libreria RxJS è fondamentale per poter poi applicare queste nozioni nel “mondo reale”.

Anche state manager per Angular come NGRX o middleware come Redux Observable per React sono basati su RxJS, quindi comprendere queste dinamiche vi permetterà di integrare nei vostri progetti nuovi strumenti e librerie che ne fanno uso.

2019-11-17T02:02:03+00:00 novembre 11th, 2019|code, javascript|

Leave A Comment