Tempo di lettura: 5 minuti
In questa mini guida vedremo cosa sono gli Observable e come utilizzarli con degli esempi pratici. Sappiate fin da subito che non si tratta di un argomento banale anche se farò di tutto per renderlo il più fruibile possibile.
Come di certo saprete la maggior parte delle applicazioni mostrano dei dati prelevati da un database. Questo tipo di programmazione richiede un sistema asincrono detto ‘Reactive Pattern’ e prende il nome dalla libreria Reactive x che contiene gli operatori atti a gestire questa tipologia di operazioni.
L’operatore , o meglio l’oggetto, utilizzato per mostrare i dati prelevati da un database e , quindi a flusso continuo, prende il nome di Observable. A differenza, quindi dei Promise in javascript ( cosa che vedremo in un altro tutorial) i quali mostrano un singolo dato.
Cosa sono gli Observable e come utilizzarli in Angular
Abbiamo detto che gli Observable sono oggetti prelevati dalla libreria RXjs( REACTIVE X) e ci consentono di gestire i dati prelevati da un database, o altra fonte esterna, in maniera asincrona.
Alcuni esempi possono essere i risultati in tempo reale di una partita di calcio , aerei in arrivo in aeroporto, messaggi in chat, etc…
Gli observable e le terminologie da conoscere
Nella programmazione denominata “Reactive pattern” usiamo termini quali Observable (colui che viene osservato), Observer o Subscriber (colui che osserva, controlla).
Per far un esempio pensate al check-in in un aeroporto dove l’Observable è il bagaglio a mano del passeggero mentre l’Observer è il poliziotto che controlla.
Inoltre nel linguaggio Javascript per iniziare a monitorare i dati in ingresso bisogna iscriversi e questa azione si identifica con Subscribe.
Nelle applicazioni Angular questo modello di programmazione, come detto in precedenza, viene utilizzato non solo per la gestione dei dati provenienti da una fonte esterna ma , come vedremo più avanti, anche per monitorare i cambi di url.
Riepilogando, quindi, i dati che arrivano da un’Api remota sono i dati da controllare o osservare (OBSERVABLE O SUBSCRIBER).
Inoltre mi dovrò iscrivere (SUBSCRIBER) per poter monitorare i dati che arriveranno in modo asincrono e , quindi, ad intervalli non prefissati.
Quali sono i vantaggi nell’utilizzo degli Observable?
Uno dei vantaggi nell’utilizzo degli Observable rispetto ai Promise(che vedremo in un altro tutorial) è ,sicuramente, quello di poter effettuare la cancellazione da esso.
Ciò è utile quando si hanno più richieste erogate in successione ed alcune di esse devono essere sovrascritte.
In programmazione un’Observable è paragonabile ad una funzione che riceve in ingresso un Observer( colui che controlla) il quale è un oggetto contenenti dei metodi.
Un’Observable lo puoi pensare come ad un array dove gli elementi arrivano in maniera asincrona nel tempo. Questo flusso di dati si può manipolare con gli operatori simili a quelli utilizzati appunto negli array:
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(num) {
console.log('Elemento Array ' + num);
});Il risultato sarà una serie di righe in successione.
Nel caso in cui ,invece, avessimo una serie di dati Observable, ottenuti trasformando l’array ,precedente, con l’operatore From della libreria RXJS:
var arrObs = Rx.Observable.from([1, 2, 3, 4, 5]);
arrObs.subscribe(function(num) {
console.log('Elemento Osservato ' + num);
});Come vedi non è cambiato molto, nel senso che ora la variabile “arrObs” è un observable, quindi una specie di array in cui conosco solo il successivo elemento in uscita (in questo caso 5), e al posto di forEach, ho inserito il metodo “subcribe”, che, come dicevamo, serve per iniziare il monitoraggio dei vari observable che arriveranno. Il risultato all’apparenza non cambia rispetto a quello che vedevamo in precedenza, ma se al posto dell’array con già i dati presenti, inserissimo l’operatore “interval” della libreria Rx, che fornisce un valore intero che si incrementa ad intervalli regolari di N millisecondi, visualizzerei nel tempo, con una certa cadenza, il flusso dei dati.
var arr = Rx.Observable.interval(1000);
arr.subscribe(function(num) {
console.log('Elemento Osservato ' + num);
});Dopo 1 secondo, vedrei la prima scritta, dopo 2 secondi un’altra scritta è così via.
Sfruttare gli Observable in Angular e gli operatori della libreria RxJS
Per poter utilizzare gli Observable in Angular si ha la necessità di importare delle librerie esterne. Probabilmente nelle future versioni di Angular questo non sarà più necessario.
Comunque per il momento dovrai aggiungere le seguenti righe:
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;
In particolare la libreria che si utilizza nella gestione dei dati asincroni ricevuti via http da server remoti è HttpClient che, a sua volta, avrà una serie di metodi quali GET,POST,PUT e DELETE.
Nel corso dello sviluppo di un’Applicazione Angular sarà quindi comune vedere operazioni come la seguente:
http.get(...)
.map(response => response['data']);dove http.get() restituire un Observable, a cui potrò poi applicare a catena, una serie di operatori della libreria RXJS, come map, per trasformare i dati ricevuti, al fine di poterli gestire nel template dell’applicazione. Il risultato sarà sempre un dato Observable, a cui potrò “iscrivermi” per poterlo monitorare, esattamente come fatto per gli array trasformati in Observable, visti in precedenza.
Esempio: quotazione titolo borsa
quotazioneTitolo(): Observable<Titolo[]> {
return this.http.get(urlAPI)
.map(response => response['data']);
}Il valore restituito dalla funzione, è un Observable costituito da un array di oggetti Titolo, restituiti da un ipotetico server remoto in modalità asincrona.
Al fine di poterli leggere, devi effettuare l’iscrizione all’Observable così prodotto, sfruttando il metodo subscribe():
quotazioneTitolo.subcribe( valoretitolo => console.log("Valore titolo in tempo reale" + valoretitolo));
Sperando di essere stato chiaro ed esaustivo ti ricordo che se vuoi approfondire i concetti puoi seguire il corso completo di Angular.
