switchMap RxJS: guida con esempio pratico

switchMap è un operatore RxJS utilizzato di frequente, soprattutto in applicazione costruite con Angular.

In questo articolo avrai modo di capire come e quando utilizzarlo, grazie anche ad un esempio interattivo.

Indice

switchMap RxJS: interfaccia

L’interfaccia dell’operatore RxJS è la seguente:

switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable

Questa interfaccia può far credere che switchMap sia un operatore caratterizzato da un funzionamento complesso.

Nel paragrafo successivo avremo modo di analizzarne un caso d’uso, per valutare il funzionamento di questo operatore.

switchMap in Angular

Nelle applicazioni web costruire con Angular è abbastanza comune trovare l’utilizzo dell’operatore switchMap di RxJS.

Un esempio di applicazione tipico di questo operatore può essere l’implementazione di un autocomplete.

A questo proposito, si consideri il seguente codice:

const searchTerms$ = new Subject<string>();
const searchResults$ = searchTerms$.pipe(
  switchMap(term => {
    return http.get(`/search?query=${term}`)
           .pipe(
              catchError((e) => of(''))
           )
  })
);

Questo estratto di codice, tratto dall’articolo “Mastering RxJS: Choosing Between SwitchMap and Map — with Practical Examples“, fa in modo che ogni termini di ricerca crei una chiamata HTTP.

Tuttavia, la digitazione di tasti può scatenare diverse chiamate HTTP.

L’utente è interessato solo al risultato della chiamata HTTP effettuata per ultima.

Grazie all’utilizzo dell’operatore switchMap, ogni volta che searchTerms$ emette, l’eventuale sottoscrizione all’observable interno precedente viene cancellata e sostituita da quella nuova e più recente.

Nell’estratto di codice precedente avrai notato l’utilizzo dell’operatore catchError().

E’ fondamentale gestire i possibili errori nell’Observable interno a switchMap.

Nel seguito dell’articolo scoprirai perché sia necessario gestire gli errori, anche grazie all’esempio interattivo messo a disposizione.

Se quanto detto in precedenza non fosse chiaro, potresti approfondire leggendo i seguenti contenuti:

switchMap(): un esempio pratico

In questo esempio interattivo ho implementato un form di ricerca.

Ogni volta che il pulsante Avvia richiesta viene cliccato viene emulata una coppia (richiesta, risposta) contenente quanto digitato nel campo di testo posto sopra al pulsante.

Ogni risposta è volutamente resa molta lenta, essendo sempre creata decine di secondi dopo la creazione della richiesta.

Risposte

Input

SwitchMap

Nessun valore emesso

Nella colonna di sinistra troverai le risposte ad ogni richiesta effettuata.

Effettuando una richiesta dopo l’altra, a breve distanza l’una dall’altra, avrai modo di verificare il funzionamento dell’operatore switchMap, nelle modalità espresse in questo articolo.

Avrai notato il checkbox con errore?: se attivo, farà in modo che la richiesta simulata generi un errore.

switchMap: gestione degli errori

Il codice per implementare l’esempio interattivo è simile all’estratto proposto nella parte superiore della pagina.

Vediamo ora lo stesso codice senza la gestione dell’errore:

const searchTerms$ = new Subject<string>();
const searchResults$ = searchTerms$.pipe(
  switchMap(term => {
    return http.get(`/search?query=${term}`)
  })
);

Consideriamo la parte di codice che esegue la chiamata get.

Se quella parte di codice dovesse generare un errore (ad esempio, il server restituisce errore 4xx / errore 5xx), tale errore verrebbe propagato fino a searchTerms$, che completerebbe la propria esecuzione andando in errore.

In altre parole, searchTerms$ non informerebbe più i sottoscrittori dei nuovi valori.

Quanto descritto è esattamente quello che accade nell’esempio proposto.

Infatti, dopo aver prodotto una richiesta con il checkbox con errore? attivo, tutte le richieste successive non verranno processate.