Introduzione RXJS – parte 3: notifiche next, error e complete

Home/code/javascript/Introduzione RXJS – parte 3: notifiche next, error e complete

Introduzione RXJS – parte 3: notifiche next, error e complete

La documentazione di RxJS definisce un Observable come segue:

Observables are lazy Push collections of multiple values.

Questo significa sostanzialmente che possiamo gestire valori sincroni e asincroni allo stesso modo.

Creazione di un Observable

Iniziamo con un esempio semplice di creazione di un Observable ed emissione di alcuni valori.

import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.complete();
});

Cosa rappresentano le funzioni next e complete?

Esistono 3 tipi di notifiche che l’esecuzione di un Observable può emettere: next, error e complete:

  • next: emette valori come number, stringhe, array, oggetti. La quantità di notifiche tramite next() varia da 0 a infinito.
  • error: emesso in caso di errore Javascript o eccezione
  • complete: non invia alcun valore e rappresenta il termine dell’esecuzione
import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.complete();
});

observable.subscribe({
  next(x) { console.log('value ' + x); },
  error(x) { console.log('error ' + x); },
  complete() { console.log('completed')}
});

Le notifiche error e complete

Mentre la funzione next può essere eseguita più volte ed è la più utilizzata, le notifiche di error e complete possono avvenire una sola volta durante l’esecuzione dell’Observable, inoltre, sono esclusive, ovvero non può esserci complete in caso di error e viceversa.

Inoltre se una notifica error o complete viene inviata, la funzione next non riceverà più dati.
Ad esempio, nei seguenti due snippet il quarto next non sarà più invocato dopo il complete o l'error:

complete:

import { Observable } from 'rxjs';

const observable = new Observable(function subscribe(subscriber) {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
  subscriber.next(4);        // Valore non emesso
});

observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(x) { console.log('some errors' + x); },
  complete() { console.log('completed')}
});

error:

import { Observable } from 'rxjs';

const observable = new Observable(function subscribe(subscriber) {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  throw new Error('ohi!');    // generate an error
  subscriber.next(4);         // Valore non emesso
});

observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(x) { console.log(x.message); },
  complete() { console.log('completed')}
});

Short Syntax

Come avrete probabilmente già notato in qualche esempio o tutorial, l’observer supporta anche una sintassi più concisa in cui la prima funzione rappresenta il next(), la seconda error() e la terza il complete()

observable.subscribe(
  val => console.log('value: ' + val),
  err => console.log(err.message),
  () => console.log('completed'),
);

Live Demo

2019-11-17T02:01:34+00:00 novembre 12th, 2019|code, javascript|

Leave A Comment