Categorie
Angular JavaScript RxJS

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.

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 => http.get(`/search?query=${term}`))
);

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 emissione dell’observable interno precedente viene cancellata e sostituita da quella nuova e più recente.

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.

Altri articoli riguardo a RxJS

Puoi trovare su questo sito numerosi contenuti relativi ad RxJS e Angular.

Eccone alcuni:

switchMap RxJS: conclusioni

In questo articolo hai visto come utilizzare l’operatore switchMap di RxJS.