I primi giorni delle applicazioni GUI hanno inaugurato un nuovo tipo di paradigma noto come architettura guidata dagli eventi. La sua caratteristica principale è che il flusso del programma è determinato da eventi come azioni dell’utente (clic del mouse, pressioni di tasti), uscite di sensori o messaggi che passano da altri programmi o thread. Faceva parte di Visual Basic, Java e JavaScript (JS). In tutti questi linguaggi, il processo è più o meno lo stesso: un thread demone ascolta gli eventi e quindi attiva una funzione di callback quando viene rilevato uno di quegli eventi.

Nelle app Web reattive di oggi, la programmazione basata sugli eventi ha raggiunto nuove vette di flessibilità e complessità. Aiutati da librerie come RxJS, gli eventi possono essere attivati ​​da qualsiasi cosa, dalle risposte AJAX, al caricamento degli elementi, ai risultati di calcoli complessi, e chi più ne ha più ne metta. Per gestire questa vasta gamma di tipi di eventi, RxJS ha introdotto il Osservabile. In questo tutorial, impareremo cos’è un Observable e come usarlo nel contesto delle tue applicazioni Angular.

Ulteriori informazioni sulla gestione degli errori in RxJS.

Stream e osservabili in RxJS

Se hai mai lavorato in Java, potresti già avere familiarità con i flussi. In ogni caso, ricapitoleremo cos’è uno stream qui in modo che siamo tutti sulla stessa pagina. Un flusso è fondamentalmente una sequenza di valori di dati nel tempo. I valori dei dati possono essere rappresentati da qualsiasi tipo, incluse primitive come numeri, oggetti JS incorporati come stringhe e Date, così come classi e/o oggetti personalizzati. Il punto chiave è che i valori dei dati possono essere raccolti nel tempo.

Un osservabile è un tipo speciale di funzione che può restituire un flusso di valori a un osservatore non appena vengono resi disponibili, in modo sincrono o asincrono. Il flusso non può mai emettere un valore o produrre un numero infinito di valori durante la vita di un’applicazione. L’osservatore sottoscrive Observable e fornisce una funzione di callback che viene eseguita ogni volta che il flusso sottostante emette un valore.

Il ciclo di vita osservabile

A causa del fatto che puoi avere molti Osservabili in ascolto di nuovi valori, possono richiedere molte risorse se non gestiti con la massima cura. Ogni istanza osservabile passa attraverso queste quattro fasi durante la sua vita:

• Creazione
• Sottoscrizione
• Esecuzione
• Distruzione

Le prossime sezioni trattano in modo più dettagliato ogni fase del ciclo di vita.

Creazione e la nuova Keyword

Gli osservabili sono oggetti; quindi, possono essere istanziati usando il nuovo parola chiave:

import { Observable, Subscriber } from 'rxjs';

const observable = 
  new Observable<string>((subscriber: Subscriber<string>) => {
    subscriber.next('Hello World!');
});

Devi passare in una funzione di abbonato. Questa è la funzione che viene eseguita quando un consumatore chiama il sottoscrivi() metodo. La funzione sottoscrittore definisce come ottenere o generare valori o messaggi da pubblicare. La tua funzione riceverà un sottoscrittore che implementa l’interfaccia Observer ed estende la classe Subscription. L’interfaccia di Observer include tre metodi utili che gestiscono i diversi tipi di notifiche che un osservabile può inviare. Questi sono:

• prossimo: Necessario. Un gestore per ogni valore consegnato. Chiamato zero o più volte dopo l’inizio dell’esecuzione.
• errore: Opzionale. Un gestore per una notifica di errore. Un errore interrompe l’esecuzione dell’istanza osservabile.
• completare: Opzionale. Un gestore per la notifica di completamento dell’esecuzione. I valori ritardati possono continuare a essere consegnati al gestore successivo al termine dell’esecuzione.

Un’istanza osservabile inizierà a pubblicare valori solo dopo che qualcuno si è iscritto ad essa.

Subscription e il metodo subscribe()

Ti iscrivi chiamando il sottoscrivi() metodo dell’istanza, passando an osservatore opporsi alla ricezione delle notifiche. Sottoscrivi() riceve un oggetto con i tre gestori di cui sopra, ma solo prossimo è obbligatorio. Ecco la firma del metodo:

source$.subscribe({ 
  next: doSomething, 
  [error: handleTheError,]
  [complete: wrapItUp]
})

Ecco del codice che implementa tutti e tre i gestori:

observable.subscribe({ 
  next: (message: string) => {
    this.messages.push(message);
    this.message = this.messages.join(', ');
  }, 
  error: (error: string) => {
    console.log(error);
    this.errMsg = error;
  }, 
  complete: () => console.log('All done.')
});

Esecuzione

L’osservatore ha il compito di eseguire le istruzioni nell’Osservabile fornendo dati, errori e il segnale che le trasmissioni sono complete. Una volta inviato il valore completo, nessun nuovo dato può essere consegnato all’Osservabile (sebbene possano essere ritardati).

import { Observable, Subscriber } from 'rxjs';

const observable = 
  new Observable<string>((subscriber: Subscriber<string>) => {
    subscriber.next('I am number 1');
    subscriber.next('I am number 2');
    setTimeout(() => {
      subscriber.next('I am number 3');
      subscriber.complete();
    }, 1000);
});

Distruzione e il metodo complete()

È di vitale importanza che tu chiami sempre completare() sui tuoi osservabili quando hai finito. Altrimenti, potresti finire con perdite di memoria e l’esecuzione di codice quando non te lo aspetti. Ciò è particolarmente vero nelle applicazioni angolari. Ecco un popolare modello di design angolare che chiama completare() quando un componente viene distrutto in modo che l’osservabile non emetta più valori:

import { Subject, Subscription, Observable } from 'rxjs';

ngUnsubscribe = new Subject();

observable
  .pipe(takeUntil(this.ngUnsubscribe))
  .subscribe({ 
    next: (message: string) => {
      this.messages.push(message);
      this.message = this.messages.join(', ');
    }, 
    error: (error: string) => {
      console.log(error);
      this.errMsg = error;
    }, 
    complete: () => console.log('All done.')
  });
  
ngOnDestroy() {
  this.ngUnsubscribe.next();
  this.ngUnsubscribe.complete();
}

Il soggetto è un tipo di osservabile, quindi può invocare i suoi tre metodi di trasmissione.

Conclusione

In questo tutorial, abbiamo imparato cos’è un osservabile e come usarlo per trasmettere messaggi asincroni agli abbonati all’interno delle tue applicazioni Angular.

Troverai una demo del codice di oggi su stackblitz.com.