In molte applicazioni reali, può essere necessario eseguire più attività asincrone contemporaneamente o determinare quale termina per prima. JavaScript offre due metodi principali per gestire tali scenari: Promise.all() e Promise.race().

Promise.all(): Esecuzione di attività in parallelo

Promise.all() consente di eseguire più promesse in parallelo. Restituisce una singola promessa che si risolve quando tutte le promesse nell'array si risolvono, oppure viene rigettata non appena una delle promesse viene rigettata. Questo metodo è utile quando è necessario che tutte le operazioni asincrone vengano completate con successo prima di procedere.

La funzione fetchMultipleResources invia tre richieste simultaneamente per recuperare i dati di un post, di un utente e dei commenti. Con Promise.all(), tutte e tre le richieste vengono avviate insieme e la funzione attende che tutte le promesse siano risolte. Una volta risolte, i risultati vengono destrutturati in variabili separate (post, user e comments). Il titolo del post, il nome dell'utente e il numero totale di commenti vengono quindi visualizzati nell'HTML. Questo approccio è efficiente quando è necessario che tutte le richieste siano completate prima di procedere, poiché riduce il tempo di attesa complessivo eseguendo le attività in parallelo.

Promise.race(): Gestione della prima promessa risolta

Promise.race() restituisce una singola promessa che si risolve o viene rifiutata non appena la prima promessa nell'array viene completata (sia risolta che rifiutata). Questo è utile quando interessa il risultato più veloce, ad esempio per impostare un timeout su una richiesta se richiede troppo tempo.

La funzione fetchWithTimeout crea una timeoutPromise che viene rifiutata dopo 3 secondi, simulando un timeout. Contemporaneamente, una fetchPromise richiede dati da un'API. Con Promise.race(), la funzione attende la promessa che si risolve per prima. Se il fetch si completa entro 3 secondi, viene visualizzato il titolo del post. Altrimenti, se il fetch richiede troppo tempo, si attiva il timeout e viene mostrato un messaggio di errore ("Request timed out!") nell'HTML. Questo approccio è ideale per gestire situazioni in cui è essenziale una risposta rapida.

Casi d'Uso per l'Esecuzione di Richieste in Parallelo vs. Sequenziale

Quando Usare Richieste Parallele (Promise.all())

Le richieste parallele sono ideali quando si recuperano dati da più fonti indipendenti, poiché consentono a tutte le richieste di essere eseguite simultaneamente. Ad esempio, durante il caricamento di dati utente, post e commenti per una dashboard, ogni richiesta è separata e non dipende dalle altre, quindi possono essere recuperate in parallelo per migliorare le prestazioni. Questo approccio riduce al minimo il tempo totale di attesa, poiché le richieste vengono elaborate contemporaneamente invece che una dopo l'altra.

Quando Usare Richieste Sequenziali

In alcuni casi, le attività devono essere completate in un ordine specifico, cioè una deve terminare prima che inizi la successiva. Per queste richieste dipendenti, è possibile utilizzare async/await in un ciclo o concatenare chiamate .then(), evitando Promise.all().

Un esempio è il recupero dei dati utente seguito, utilizzando l'ID utente ottenuto, dal recupero dei post dell'utente. In questi scenari, ogni richiesta dipende dai risultati della precedente, rendendo necessario un approccio sequenziale.

Questo esempio dimostra come effettuare richieste sequenziali in cui ogni richiesta dipende dal risultato della precedente. In fetchUserDataSequentially, la funzione prima recupera i dati dell'utente dall'API. Una volta ricevuti e analizzati i dati dell'utente, l'ID dell'utente viene utilizzato in una seconda richiesta per ottenere i post dell'utente. I risultati vengono poi visualizzati nell'HTML, mostrando il nome dell'utente e il numero di post. Questo approccio sequenziale è necessario quando le richieste sono interdipendenti, garantendo che ogni richiesta sia completata prima di iniziare la successiva.