forkJoin RxJS: come utilizzarlo

forkJoin è un operatore di RxJS che può risultare utile in molte situazioni.

In questo articolo vedremo il funzionamento di questo operatore, avvalendoci anche di un esempio interattivo.

Indice

forkJoin RxJS: interfaccia

L’interfaccia dell’operatore forkJoin di RxJS è la seguente:

import { forkJoin } from 'rxjs';
forkJoin([obsOne$, obsTwo$, obsThree$]);

dove obsOne$, obsTwo$, obsThree$ sono Observable.

Se avessi bisogno di approfondire (o rinfrescare) il concetto di Observable, puoi consultare l’articolo Observable RxJS: cosa è, come si usa.

RxJS forkJoin: funzionamento

Questo operatore emette un valore quando tutti gli Observable forniti come argomento sono completati.

forkJoin RxJS funzionamento — Timeline di forkJoin(). Cortesia di https://rxjs.dev/api/index/function/forkJoin

Come promemoria, ricordo che un Observable che è completato non può più emettere valori.

forkJoin() in Angular

forkJoin trova grande applicazione nei progetti costruiti utilizzando Angular.

Un contesto tipo di utilizzo è la necessità di venir notificati quando più chiamate AJAX ottengono risposta dal backend.

La comunicazione con il backend infatti è modellata attraverso l’utilizzo di Observable.

Fornendo quindi ogni Observable a forkJoin(), avrai la possibilità di sapere quando tutte le chiamate saranno terminate.

Se vuoi, puoi approfondire la comunicazione con il backend in Angular leggendo l’articolo Angular chiamata AJAX: il servizio HttpClient

forkJoin(): un esempio pratico

Nell’esempio interattivo di seguito viene simulato lo scenario descritto nella sezione precedente.

Quando premerai il pulsante Avvia simulazione, verranno creati tre Observable che termineranno in maniera casuale in un intervallo compreso tra 0 e 20 secondi.

Richiesta 1

Nessuna richiesta in corso

Richiesta 2

Nessuna richiesta in corso

Richiesta 3

Nessuna richiesta in corso

forkJoin

Utilizzando forkJoin(), l’esempio aggiornerà l’etichetta posta sopra il pulsante.

Riporto di seguito un estratto di codice che implementa l’esempio proposto:

import { forkJoin, timer } from 'rxjs';
let requests = [];
const maxRequestDuration: number = 20000;
for (let requestIndex = 0; requestIndex < 3; requestIndex++) {
   const requestDuration: number = Math.random() * maxRequestDuration;
   const request$ = timer(requestDuration);
   requests.push(request$);
   request$.subscribe(() => {
     // scrivo nel DOM che questa richiesta è completata
   });
}
forkJoin(requests)
  .subscribe(() => {
   // scrivo nel DOM che tutte le richieste sono completate
});