Async/Await vs Promises in JavaScript: Quando e Perché Usare Ciascuno

Intermedio
JavaScript

Esplora le differenze fondamentali tra Promises e async/await in JavaScript, comprendendo come entrambi gestiscono l'asincronia e quando scegliere l'uno o l'altro per scrivere codice più pulito ed efficiente.

Pubblicato
Tag
Web Development javascript async await Best practices es6 promises asincronia Error Handling

Il JavaScript, per sua natura monothread, ha dovuto evolvere costantemente per gestire operazioni asincrone senza bloccare il thread principale. Questa evoluzione ci ha portato da semplici callback all'introduzione delle Promises, fino all'elegante sintassi di async/await. Comprendere le differenze e i punti di forza di ciascun approccio è cruciale per ogni sviluppatore web moderno.

Questo articolo si propone di guidarti attraverso le fondamenta delle Promises e di async/await, analizzando le loro interazioni, i loro vantaggi e svantaggi, e fornendo indicazioni pratiche su quando è più opportuno utilizzare l'uno o l'altro.

L'Evoluzione dell'Asincronia in JavaScript: Da Callback a async/await

Prima di addentrarci nelle specifiche di Promises e async/await, è utile fare un passo indietro e capire il contesto storico. Per molto tempo, le operazioni asincrone in JavaScript (come il caricamento di dati da un server o la lettura di un file) venivano gestite tramite callback. Una callback è semplicemente una funzione che viene passata come argomento a un'altra funzione e che verrà eseguita solo dopo che l'operazione asincrona sarà completata.

Il "Callback Hell"

Sebbene efficaci, le callback presentavano un problema significativo quando si dovevano gestire molte operazioni asincrone in sequenza o con dipendenze. Questo fenomeno, noto come "Callback Hell" o "Pyramid of Doom", rendeva il codice estremamente difficile da leggere, mantenere e debuggare, a causa della profonda indentazione e della logica annidata.

// Esempio di Callback Hell
getData(function(data) {
  processData(data, function(processedData) {
    saveData(processedData, function(result) {
      console.log('Dati salvati:', result);
    }, function(error) {
      console.error('Errore nel salvataggio:', error);
    });
  }, function(error) {
    console.error('Errore nell'elaborazione:', error);
  });
}, function(error) {
  console.error('Errore nel recupero dati:', error);
});

Questo scenario ha spinto la comunità JavaScript a cercare soluzioni più strutturate ed eleganti per la gestione dell'asincronia, portando all'introduzione delle Promises.

Promises: Le Fondamenta dell'Asincronia Moderna

Le Promises sono un oggetto in JavaScript che rappresenta il completamento (o il fallimento) eventuale di un'operazione asincrona e il suo valore risultante. Una Promise può trovarsi in uno dei seguenti stati:

  • Pending: Lo stato iniziale; l'operazione non è ancora terminata.
  • Fulfilled (o Resolved): L'operazione è stata completata con successo e ha prodotto un valore.
  • Rejected: L'operazione è fallita e ha prodotto un motivo (un errore).

Una volta che una Promise passa dallo stato pending a fulfilled o rejected, è considerata settled (stabilizzata) e il suo stato non può più cambiare. Questo è un concetto chiave: una Promise è un valore che sarà disponibile in futuro, o un errore che si verificherà.

Creare e Usare le Promises

Una Promise viene creata utilizzando il costruttore new Promise(), che accetta una funzione esecutore. Questa funzione a sua volta riceve due argomenti: resolve e reject, che sono funzioni utilizzate per cambiare lo stato della Promise.

const myPromise = new Promise((resolve, reject) => {
  // Simuliamo un'operazione asincrona, ad esempio un setTimeout
  setTimeout(() => {
    const success = true; // Simula il successo o il fallimento dell'operazione
    if (success) {
      resolve('Dati recuperati con successo!');
    } else {
      reject('Errore durante il recupero dei dati.');
    }
  }, 2000);
});

myPromise.then((message) => {
  console.log('Successo:', message);
}).catch((error) => {
  console.error('Errore:', error);
}).finally(() => {
  console.log('Operazione Promise completata (sia successo che errore).');
});

In questo esempio, then() viene chiamato quando la Promise viene risolta (fulfilled), mentre catch() viene chiamato quando la Promise viene rifiutata (rejected). finally() viene sempre chiamato, indipendentemente dall'esito, ed è utile per operazioni di pulizia.

Promise Chaining

Uno dei maggiori vantaggi delle Promises è la possibilità di concatenarle. Ogni metodo then() restituisce una nuova Promise, permettendo di eseguire operazioni sequenziali senza la nidificazione eccessiva delle callback.

function fetchData(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Recupero dati per utente ${userId}`);
      resolve({ id: userId, name: `User ${userId}`, email: `user${userId}@example.com` });
    }, 1000);
  });
}

function processUserData(userData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log(`Elaborazione dati per ${userData.name}`);
      resolve({ ...userData, processed: true, timestamp: Date.now() });
    }, 1500);
  });
}

function saveProcessedData(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Salvataggio dati elaborati per ${data.name}`);
      // Simuliamo un errore di salvataggio occasionale
      if (Math.random() > 0.1) {
        resolve(`Dati per ${data.name} salvati con successo.`);
      } else {
        reject(`Errore nel salvataggio dei dati per ${data.name}.`);
      }
    }, 800);
  });
}

// Esempio di Promise Chaining
fetchData(123)
  .then(userData => processUserData(userData))
  .then(processedData => saveProcessedData(processedData))
  .then(finalMessage => {
    console.log('Successo finale:', finalMessage);
  })
  .catch(error => {
    console.error('Errore nella catena:', error);
  })
  .finally(() => {
    console.log('Processo completo di fetch, elaborazione e salvataggio.');
  });

Questo codice è molto più leggibile rispetto all'equivalente con callback, poiché la logica fluisce in modo lineare. Ogni then riceve il risultato della Promise precedente.

Metodi Statici delle Promises

Le Promises offrono anche metodi statici utili per gestire più Promises contemporaneamente:

  • Promise.all(iterable): Attende che tutte le Promises nell'iterable siano risolte. Se una sola rifiuta, Promise.all rifiuta immediatamente.
  • Promise.race(iterable): Restituisce una Promise che si risolve o rifiuta non appena una delle Promises nell'iterable si risolve o rifiuta.
  • Promise.allSettled(iterable): Restituisce una Promise che si risolve quando tutte le Promises nell'iterable sono state stabilizzate (risolte o rifiutate), fornendo un array con lo stato e il valore/motivo di ciascuna.
  • Promise.any(iterable): Restituisce una Promise che si risolve non appena una delle Promises nell'iterable si risolve. Se tutte rifiutano, rifiuta con un AggregateError.

Async/Await: Sintassi Semplificata per un Codice Più Leggibile

Introdotto in ES2017, async/await è una "sintassi zuccherina" (syntactic sugar) costruita sopra le Promises. Non sostituisce le Promises, ma fornisce un modo più pulito e sincrono di scrivere codice asincrono, rendendolo più facile da leggere e da debuggare. Dietro le quinte, async/await utilizza sempre le Promises.

La Keyword async

Una funzione dichiarata con la keyword async restituisce sempre una Promise. Se la funzione async restituisce un valore non-Promise, JavaScript lo avvolgerà automaticamente in una Promise risolta. Se la funzione lancia un'eccezione, la Promise restituita verrà rifiutata.

async function sayHello() {
  return 'Ciao Mondo!'; // Equivalente a return Promise.resolve('Ciao Mondo!');
}

sayHello().then(message => console.log(message)); // Output: Ciao Mondo!

async function throwErrorExample() {
  throw new Error('Errore nella funzione async!'); // Equivalente a return Promise.reject(new Error(...));
}

throwErrorExample().catch(error => console.error(error.message)); // Output: Errore nella funzione async!

La Keyword await

La keyword await può essere utilizzata solo all'interno di una funzione async. await mette in pausa l'esecuzione della funzione async finché la Promise su cui è applicato non viene risolta (o rifiutata). Una volta risolta, await restituisce il valore risolto della Promise e l'esecuzione della funzione async riprende.

// Riutilizziamo le funzioni fetchData, processUserData, saveProcessedData definite prima

async function handleUserDataFlow(userId) {
  try {
    const userData = await fetchData(userId);
    console.log('Dati utente recuperati:', userData);

    const processedData = await processUserData(userData);
    console.log('Dati utente elaborati:', processedData);

    const finalMessage = await saveProcessedData(processedData);
    console.log('Successo finale:', finalMessage);

  } catch (error) {
    console.error('Si è verificato un errore nel flusso:', error.message);
  }
}

handleUserDataFlow(456);

Confronta questo codice con l'esempio di Promise Chaining precedente. La sintassi async/await rende il flusso asincrono molto più simile al codice sincrono, migliorando notevolmente la leggibilità e la comprensione della sequenza delle operazioni.

Gestione degli Errori con try...catch

Uno dei maggiori vantaggi di async/await è la possibilità di utilizzare i blocchi try...catch standard di JavaScript per gestire gli errori. Questo rende la gestione degli errori molto più familiare e intuitiva rispetto ai .catch() delle Promises.

Come mostrato nell'esempio handleUserDataFlow, qualsiasi Promise rifiutata all'interno del blocco try farà sì che l'esecuzione salti immediatamente al blocco catch, dove l'errore può essere gestito centralmente.

Differenze Chiave e Quando Usare Cosa

Sebbene async/await sia costruito sulle Promises, ci sono differenze fondamentali nel loro utilizzo e nei contesti in cui brillano.

Leggibilità e Manutenibilità

  • async/await: Generalmente vince in termini di leggibilità, soprattutto per sequenze complesse di operazioni asincrone. Il codice sembra sincrono, il che ne facilita la comprensione e il debugging. È più facile seguire il flusso logico.
  • Promises: Richiede una maggiore attenzione alla catena .then().catch(), che può diventare complessa se la logica è molto ramificata. Tuttavia, per operazioni singole o catene semplici, le Promises sono perfettamente leggibili.

Gestione degli Errori

  • async/await: Utilizza il familiare costrutto try...catch, che è intuitivo per chiunque abbia esperienza con linguaggi sincroni. Permette di catturare errori da più await in un unico blocco.
  • Promises: Richiede l'uso di .catch() alla fine della catena o dopo ogni then() se si desidera gestire errori specifici per fase. Dimenticare un .catch() può portare a errori non gestiti.

Debugging

  • async/await: È più facile da debuggare perché i breakpoint si comportano come nel codice sincrono. Lo stack trace degli errori è spesso più chiaro e diretto, puntando alla riga esatta dove l'errore è stato lanciato.
  • Promises: Il debugging può essere più complesso a causa della natura asincrona e della catena di .then(). Gli stack trace possono essere meno informativi, a volte mostrando solo la Promise che ha rifiutato e non la causa originale.

Parallelismo

  • async/await: Di per sé, await esegue le operazioni in sequenza. Per eseguire operazioni in parallelo, è necessario combinare async/await con Promise.all() (o Promise.race(), ecc.). 
    async function fetchMultipleData() {
  const [users, products] = await Promise.all([
    fetch('/api/users').then(res => res.json()),
    fetch('/api/products').then(res => res.json())
  ]);
  console.log('Utenti:', users, 'Prodotti:', products);
}
  • Promises: Offre nativamente metodi come Promise.all() e Promise.race() per gestire il parallelismo in modo esplicito e diretto.

Quando Usare async/await

  • Sequenze di operazioni asincrone: Quando hai una serie di operazioni che devono essere eseguite una dopo l'altra, e ogni operazione dipende dal risultato della precedente.
  • Codice più leggibile: Per migliorare la chiarezza e la manutenibilità del codice asincrono, specialmente in funzioni complesse.
  • Gestione degli errori familiare: Quando preferisci usare try...catch per gestire gli errori in modo sincrono.
  • Interazione con API o database: La maggior parte delle chiamate di rete o operazioni su database sono asincrone e beneficiano enormemente della sintassi async/await.

Quando Usare le Promises (direttamente)

  • Costruzione di librerie o API asincrone: Quando stai creando funzioni che devono esporre un'interfaccia asincrona per altri sviluppatori, le Promises sono il costrutto fondamentale su cui si basano.
  • Parallelismo puro: Per scenari in cui devi eseguire molte operazioni asincrone contemporaneamente e attendere che tutte (o la prima) si completino, Promise.all() o Promise.race() sono strumenti essenziali, anche se spesso usati dentro funzioni async.
  • Funzioni che non necessitano di await: Se una funzione deve semplicemente restituire il risultato di una Promise senza attendere altre operazioni asincrone al suo interno, non è strettamente necessario renderla async.
  • Compatibilità legacy: In ambienti o basi di codice più vecchi dove async/await potrebbe non essere supportato (anche se oggi è raro).

Esempi Pratici e Scenari Reali

Vediamo alcuni scenari comuni per capire meglio l'applicazione di queste tecniche.

Scenario 1: Fetching Dati da API Multiple

Supponiamo di dover recuperare i dati di un utente e i suoi ordini da due endpoint API diversi.

Con Promises Chaining (Sequenziale)

function getUser(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => {
      if (!response.ok) throw new Error('Failed to fetch user');
      return response.json();
    });
}

function getUserOrders(userId) {
  return fetch(`https://api.example.com/users/${userId}/orders`)
    .then(response => {
      if (!response.ok) throw new Error('Failed to fetch orders');
      return response.json();
    });
}

getUser(1)
  .then(user => {
    console.log('Utente:', user);
    return getUserOrders(user.id); // Recupera gli ordini dopo aver ottenuto l'utente
  })
  .then(orders => {
    console.log('Ordini:', orders);
    console.log('Processo completato.');
  })
  .catch(error => {
    console.error('Errore nel recupero dati:', error);
  });

Con async/await (Sequenziale)

async function fetchUserDataSequentially(userId) {
  try {
    const userResponse = await fetch(`https://api.example.com/users/${userId}`);
    if (!userResponse.ok) throw new Error('Failed to fetch user');
    const user = await userResponse.json();
    console.log('Utente:', user);

    const ordersResponse = await fetch(`https://api.example.com/users/${user.id}/orders`);
    if (!ordersResponse.ok) throw new Error('Failed to fetch orders');
    const orders = await ordersResponse.json();
    console.log('Ordini:', orders);

    console.log('Processo completato.');
  } catch (error) {
    console.error('Errore nel recupero dati:', error.message);
  }
}

fetchUserDataSequentially(1);

In questo caso, async/await è chiaramente più leggibile. Entrambi gli esempi sono sequenziali, il che significa che il recupero degli ordini inizia solo dopo che i dati dell'utente sono stati completamente recuperati.

Con async/await e Promise.all (Parallelo)

Se il recupero dell'utente e il recupero degli ordini non dipendono l'uno dall'altro e possono essere eseguiti contemporaneamente per migliorare le performance:

async function fetchUserDataParallel(userId) {
  try {
    const [userResponse, ordersResponse] = await Promise.all([
      fetch(`https://api.example.com/users/${userId}`),
      fetch(`https://api.example.com/users/${userId}/orders`)
    ]);

    if (!userResponse.ok) throw new Error('Failed to fetch user');
    if (!ordersResponse.ok) throw new Error('Failed to fetch orders');

    const user = await userResponse.json();
    const orders = await ordersResponse.json();

    console.log('Utente (parallelo):', user);
    console.log('Ordini (parallelo):', orders);
    console.log('Processo parallelo completato.');

  } catch (error) {
    console.error('Errore nel recupero dati parallelo:', error.message);
  }
}

fetchUserDataParallel(2);

Questo dimostra come async/await e Promise.all si complementino perfettamente per gestire sia la sequenzialità che il parallelismo in modo pulito.

Scenario 2: Operazioni su Database Asincrone

Le operazioni di I/O (Input/Output), come quelle con un database, sono intrinsecamente asincrone. La maggior parte dei driver di database moderni per Node.js restituisce Promises.

// Supponiamo di avere un modulo db che restituisce Promises
const db = {
  connect: () => new Promise(resolve => setTimeout(() => { console.log('Connesso al DB'); resolve(); }, 500)),
  query: (sql) => new Promise(resolve => setTimeout(() => { console.log(`Eseguo: ${sql}`); resolve([{ id: 1, name: 'Item A' }]); }, 700)),
  disconnect: () => new Promise(resolve => setTimeout(() => { console.log('Disconnesso dal DB'); resolve(); }, 300))
};

async function performDbOperations() {
  let connection;
  try {
    await db.connect();
    connection = true; // Simula una connessione aperta

    const results = await db.query('SELECT * FROM products');
    console.log('Risultati query:', results);

    // Altre operazioni DB...

  } catch (error) {
    console.error('Errore durante le operazioni DB:', error);
  } finally {
    if (connection) {
      await db.disconnect();
    }
  }
}

performDbOperations();

L'uso di async/await qui rende il codice che interagisce con il database molto più lineare e facile da seguire, replicando il modello di programmazione sincrona a cui molti sviluppatori sono abituati, pur mantenendo la natura non bloccante di JavaScript.

Errori Comuni da Evitare

Quando si lavora con l'asincronia, è facile cadere in alcune trappole comuni. Ecco alcuni errori da evitare:

  1. Dimenticare await in una funzione async: Se chiami una funzione che restituisce una Promise all'interno di una funzione async ma dimentichi await, la Promise non verrà risolta e la tua variabile conterrà la Promise stessa, non il suo valore. Questo può portare a bug difficili da individuare. 
    async function wrongExample() {
  const data = fetchData(1); // Manca 'await'!
  console.log(data); // Stampa la Promise, non i dati
}
  2. Non gestire gli errori: Che tu stia usando .catch() con le Promises o try...catch con async/await, è fondamentale gestire i potenziali errori. Ignorare gli errori può portare a crash inaspettati o a un comportamento imprevedibile dell'applicazione.
  3. Abusare di await in loop senza parallelizzazione: Se devi eseguire operazioni asincrone indipendenti all'interno di un loop, l'uso di await per ogni iterazione le renderà sequenziali, rallentando inutilmente l'esecuzione. In questi casi, Promise.all() è la soluzione migliore. 
    // Lento: esegue una fetch alla volta
async function fetchManySequentially(ids) {
  const results = [];
  for (const id of ids) {
    results.push(await fetchData(id)); // Ogni 'await' blocca il loop
  }
  return results;
}

// Veloce: esegue tutte le fetch in parallelo
async function fetchManyParallel(ids) {
  const promises = ids.map(id => fetchData(id));
  return await Promise.all(promises);
}
  4. Bloccare l'event loop: Anche se async/await rende il codice sincrono nell'aspetto, JavaScript rimane monothread. Operazioni computazionalmente intensive che non sono asincrone (es. un loop for molto lungo) bloccheranno comunque l'event loop, rendendo l'interfaccia utente non responsiva. async/await non risolve questo problema; per questo si usano Web Workers o si delegano calcoli pesanti a servizi esterni.

Prossimi Passi

Comprendere a fondo Promises e async/await è un passo fondamentale per padroneggiare la programmazione asincrona in JavaScript. Per approfondire ulteriormente, ti suggerisco di esplorare:

  • Patterns avanzati di Promises: Come Promise.race, Promise.any, Promise.allSettled e i loro casi d'uso specifici.
  • Gestione degli errori complessa: Impara a creare classi di errore personalizzate e a gestire errori in catene di Promises o blocchi try...catch annidati.
  • Web Workers: Per gestire operazioni computazionalmente intensive senza bloccare il thread principale nel browser.
  • Event Loop di JavaScript: Approfondire il funzionamento dell'Event Loop ti darà una comprensione più profonda di come JavaScript gestisce l'asincronia e ti aiuterà a scrivere codice più performante.
  • Librerie di utilità asincrone: Esistono librerie come async (per Node.js) o RxJS (per reattività) che offrono astrazioni e strumenti aggiuntivi per la gestione di flussi asincroni complessi.

Continuare a praticare e sperimentare con questi costrutti ti aiuterà a sviluppare un'intuizione solida su quando e come applicare al meglio Promises e async/await nei tuoi progetti web.

Continua a leggere