RxJS è la libreria Javascript che consente di sviluppare utilizzando una metodologia chiamata Reactive Programming, la quale utilizza gli Observable per la gestione di codice asincrono e callback. L'operazione che da il via a una pipeline creata a partire da un Observable è l'operazione subscribe, la quale crea una sottoscrizione allo stream e ne riceve i risultati.
L'operazione di interazione più conosciuta è la map. Supponendo di avere un Observable che emetta una sequenza di numeri, possiamo modificarne il risultato con la seguente scrittura.
// 1,2,3,4 myObs$.pipe( map(x=>x*2) ) .subscribe(x=>console.log(x)); // 2,4,6,8
L'operatore map funziona correttamente se l'operazione al suo interno è asincrona. Nel caso di un'operazione asincrona, abbiamo bisogno di utilizzare un altro metodo che riesca a gestire la Subscription generata dalla sottoscrizione al secondo Observable. Il codice di seguito è fortemente sconsigliato, in quanto all'interno dello stream, a ogni emissione si va creare una subscription non gestita.
myObs$.pipe( tap(x=>{ otherOps(x).subscribe(x=>console.log(x)); }) ) .subscribe(); // oppure myObs$.pipe( map(x=>otherOps(x)) ) .subscribe(r => r.subscribe(x=>console.log(x)));
Per poter gestire il flusso di Observable in modo corretto e più pulito, RxJS ci mette a disposizione tre diversi operatori:
- mergeMap: consente la sottoscrizione automatica alla seconda Observable, prendendosi carico della gestione della sua subscription. Non garantisce l'ordine di emissione, se la subscription ha casi in cui la computazione richieda più tempo. Caso d'uso: inserimento articoli in un carrello - ogni sottoscrizione deve completarsi.
myObs$.pipe( mergeMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
- switchMap: comportamento simile alla MergeMap, ma all'arrivo di un nuovo dato dalla prima Observable, la sottoscrizione alla seconda viene cancellata e risottoscritta. Caso d'uso: gestione azioni utente - quando l'utente esegue più volte un'azione, e a ogni ripetizione il flusso corrente deve essere bloccato e re-iniziare.
myObs$.pipe( switchMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
- concatMap: diversamente dalla switchMap, prima di risottoscriversi alla seconda subscription attende il completamento del flusso precedente. Contrariamente alla MergeMap, garantisce l'uniformità tra ordine di ingresso e ordine di emissione. Caso d'uso: conversione di numeri - ogni sequenza deve completarsi e al termine voglio poter analizzare l'output sulla base dell'input
myObs$.pipe( concatMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Cambiare la chiave di partizionamento di Azure Cosmos DB
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
C# 12: Cosa c'è di nuovo e interessante
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Usare una container image come runner di GitHub Actions
Esportare ed analizzare le issue di GitHub con la CLI e GraphQL
Eseguire attività basate su eventi con Azure Container Jobs
Specificare il versioning nel path degli URL in ASP.NET Web API
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Utilizzare gli snapshot con Azure File shares
Semplificare il deployment di siti statici con Azure Static Web App
Creare gruppi di client per Event Grid MQTT