Libreria RxJs

Libreria RxJs

L’obiettivo di questa libreria è quello di lavorare con dei flussi dati asincroni.

Nel corso di questo articolo vedremo alcuni esempi di utilizzo della libreria RxJs, una tra le più diffuse per la gestione di flussi asincroni. Il sito di riferimento della libreria RxJs è disponibile a questo link.

La libreria può essere inclusa direttamente tramite CDN, ma è disponibile anche tramite npm:

Una volta effettua l’installazione è possibile verificare il corretto funzionamento accedendo alla variabile Rx, generata includendo la libreria all’interno di una pagina html:

Se non verranno visualizzati errori, l’installazione è andata a buon fine.

Esempio di utilizzo

Il funzionamento della libreria ruota intorno a due concetti fondamentali: observable e subscribe. La dichiarazione di una variabile observable avviene nel seguente modo:

che corrisponde alla creazione di uno stream di dati collegata ad un array di numeri.

Per poter sfruttare lo stream appena creato è necessario sottoscrivere un oggetto:

consentendo la scansione di ogni singolo record, uno di seguito all’altro. Se volessimo, ad esempio, modificare i valori dell’array prima di effettuare la sottoscrizione sarebbe necessario intercettare il flusso prima di effettuare la sottoscrizione:

Nell’esempio viene effettuata la moltiplicazione per 2 di ciascun elemento (utilizzando la funzione map).

Il metoto subscribe accetta in ingresso tre parametri:
– la funzione da eseguire sul flusso di dati
– la funzione da eseguire in caso di errore
– il metodo da eseguire al termine del flusso di dati

L’elenco completo delle funzioni utilizzabili per gli stream di dati è riportato nel sito Rx Marbles, dove sono presenti numerosi esempi di utilizzo.

E’ possibile utilizzare la libreria RxJs anche all’interno di Typescript, l’unico differenza rispetto all’utilizzo all’interno di pagine html è il tipo di inclusione:

Una differenza fondamentale tra Promise e un observable è che una Promise una volta risolta non può più essere richiamata, mentre un observable è sempre disponibile. Tecnicamnete, un observable gestisce al suo interno uno stack di tutti i subscriber che si sono iscritti all’oggetto.

Trasformazione di una promise in observable

Considerando una chiamata REST Api tramite il metodo fetch (che al momento della scrittura di questo articolo è ancora sperimentale), è possibile trasformare il risultato della promise in un oggetto observable, in un flusso di dati.  Analizziamo la seguente chain:

che ritorna un array, dopo una serie di concatenamenti di funzioni (e relativi then). RxJs mette a disposizione la funzione fromPromise da applicare nel seguente modo:

A questo punto è possibile tramite la subscribe dell’ultima riga è possible accedere allo streaming.

Pubblicato da

Andrea Merlin

Laureato in informatica, diversi corsi di specializzazione legati allo Sviluppo Software e alla Computer forensics. Appassionato di nuove tecnologie, amo la programmazione, la Business Intelligence e tematiche legate alla Privacy.Sempre alla ricerca di nuove idee, stimoli … e progetti da seguire!Amo trascorrere il tempo libero in Val Borbera, un piccolo angolo del Piemonte, in provincia di Alessandria.