Mastering le Promise in JavaScript: Guida Completa all'Asincronia

Intermedio
JavaScript

Scopri come gestire l'asincronia in JavaScript utilizzando le Promise. Dalle basi a Promise.all, fino al moderno async/await.

Pubblicato
Tag
Web Development javascript async await promises asincronia

Introduzione all'Asincronia in JavaScript

Per comprendere le Promise, dobbiamo prima capire come JavaScript gestisce l'esecuzione del codice. JavaScript è un linguaggio a singolo thread (single-threaded), il che significa che può eseguire un'unica operazione alla volta. In un mondo ideale, ogni riga di codice verrebbe eseguita istantaneamente. Tuttavia, nel web development, molte operazioni richiedono tempo: una richiesta a un'API esterna, la lettura di un file dal disco o l'interazione con un database.

Se JavaScript attendesse che una richiesta di rete fosse completata prima di passare alla riga successiva, l'intera interfaccia utente si bloccherebbe (freezing), rendendo l'esperienza utente terribile. Per evitare questo, JavaScript utilizza un modello di programmazione asincrona. In passato, l'unico modo per gestire l'asincronia era l'utilizzo dei callback, ovvero funzioni passate come argomenti a un'altra funzione per essere eseguite al termine di un'operazione.

Il problema del Callback Hell

L'uso eccessivo di callback portava a una struttura del codice nota come "Callback Hell" o "Pyramid of Doom". Immaginate di dover effettuare tre chiamate API sequenziali, dove ogni chiamata dipende dal risultato della precedente. Il codice diventerebbe rapidamente un incubo di annidamenti, rendendo il debugging e la manutenzione quasi impossibili.

Ecco dove entrano in gioco le Promise. Una Promise è un oggetto che rappresenta l'eventuale completamento (o fallimento) di un'operazione asincrona e il suo valore finale risultante.

Cos'è esattamente una Promise?

Possiamo pensare a una Promise come a un "contratto". Quando avviiamo un'operazione asincrona, JavaScript ci restituisce una Promise. Questa Promise ci dice: "Non ho ancora il risultato, ma ti prometto che ti avviserò non appena l'operazione sarà terminata, consegnandoti il dato richiesto o spiegandoti perché è fallita".

Gli stati di una Promise

Una Promise può trovarsi in uno di questi tre stati:

  1. Pending (In attesa): Lo stato iniziale. L'operazione non è ancora stata completata né fallita.
  2. Fulfilled (Completata): L'operazione è terminata con successo. In questo stato, la Promise restituisce un valore.
  3. Rejected (Rifiutata): L'operazione è fallita. In questo stato, la Promise restituisce un motivo (solitamente un oggetto Error).

Una volta che una Promise passa da Pending a Fulfilled o Rejected, il suo stato è "settled" (stabilizzato) e non può più cambiare.

Creare e Consumare una Promise

Per creare una Promise, utilizziamo il costruttore new Promise. Questo costruttore accetta una funzione chiamata executor, che riceve due parametri: resolve e reject.

  • resolve(value): Viene chiamata quando l'operazione ha successo.
  • reject(error): Viene chiamata quando l'operazione fallisce.

Ecco un esempio pratico di come creare una Promise che simula il caricamento di dati da un server:

const fetchUserData = (userId) => {
  return new Promise((resolve, reject) => {
    console.log("Avvio ricerca utente...");
    
    // Simuliamo un ritardo di rete con setTimeout
    setTimeout(() => {
      const success = Math.random() > 0.2; // 80% di probabilità di successo
      
      if (success) {
        const user = { id: userId, name: "Mario Rossi", email: "mario@example.com" };
        resolve(user);
      } else {
        reject(new Error("Errore di connessione al server!"));
      }
    }, 2000);
  });
};

Come consumare la Promise

Una volta che abbiamo una Promise, non possiamo accedere direttamente al suo valore (perché potrebbe non essere ancora disponibile). Dobbiamo usare dei metodi specifici per "ascoltare" il risultato.

  • .then(): Viene eseguito quando la Promise è Fulfilled.
  • .catch(): Viene eseguito quando la Promise è Rejected.
  • .finally(): Viene eseguito sempre, indipendentemente dall'esito.
fetchUserData(1)
  .then((user) => {
    console.log("Dati ricevuti con successo:", user.name);
  })
  .catch((error) => {
    console.error("Si è verificato un problema:", error.message);
  })
  .finally(() => {
    console.log("Operazione conclusa.");
  });

Promise Chaining: Risolvere il Callback Hell

Uno dei vantaggi principali delle Promise è la possibilità di concatenarle. Poiché il metodo .then() restituisce a sua volta una nuova Promise, possiamo concatenare diverse operazioni asincrone in modo lineare invece che annidato.

Immaginiamo di dover: 1. Autenticare l'utente $
ightarrow$ 2. Recuperare il suo profilo $
ightarrow$ 3. Recuperare i suoi ordini.

// Funzioni simulate che restituiscono Promise
const authenticate = (user) => Promise.resolve({ token: 'abc123', id: 1 });
const getProfile = (token) => Promise.resolve({ name: 'Mario', id: 1 });
const getOrders = (userId) => Promise.resolve(['Ordine 1', 'Ordine 2']);

authenticate('user_login')
  .then(auth => {
    console.log("Autenticato!");
    return getProfile(auth.token);
  })
  .then(profile => {
    console.log("Profilo recuperato:", profile.name);
    return getOrders(profile.id);
  })
  .then(orders => {
    console.log("Ordini trovati:", orders);
  })
  .catch(err => {
    console.error("Errore in una delle fasi:", err);
  });

In questo esempio, se qualsiasi delle Promise nella catena fallisce, l'esecuzione salta immediatamente al blocco .catch(), rendendo la gestione degli errori centralizzata e molto più pulita.

Gestione Avanzata: Promise.all, Promise.race e Promise.allSettled

A volte non abbiamo bisogno di eseguire operazioni in sequenza, ma vogliamo gestirne diverse contemporaneamente.

Promise.all()

Promise.all accetta un array di Promise e restituisce una singola Promise che viene risolta solo quando tutte le Promise nell'array sono state risolte. Se anche una sola di esse fallisce, l'intera Promise fallisce immediatamente.

const p1 = fetch('/api/user');
const p2 = fetch('/api/settings');
const p3 = fetch('/api/notifications');

Promise.all([p1, p2, p3])
  .then(([resUser, resSettings, resNotif]) => {
    console.log("Tutti i dati sono stati caricati");
  })
  .catch(err => {
    console.error("Almeno una richiesta è fallita");
  });

Promise.race()

Promise.race restituisce il risultato della prima Promise che si risolve o si rifiuta, ignorando tutte le altre. È utile, ad esempio, per implementare un timeout su una richiesta di rete.

Promise.allSettled()

Introdotto in ES2020, Promise.allSettled è simile a Promise.all, ma non fallisce se una delle Promise viene rifiutata. Restituisce invece un array di oggetti che descrivono l'esito di ogni singola Promise (status: 'fulfilled' o status: 'rejected').

L'Evoluzione: Async e Await

Sebbene le Promise siano potenti, la sintassi .then() può comunque diventare verbosa. Per risolvere questo, JavaScript ha introdotto le parole chiave async e await (introdotte in ES2017), che permettono di scrivere codice asincrono che sembra sincrono.

  • async: Dichiarare una funzione come async significa che essa restituirà sempre una Promise.
  • await: Può essere usato solo all'interno di funzioni async. Sospende l'esecuzione della funzione finché la Promise non viene risolta.

Ecco come riscriveremmo il nostro esempio di chaining precedente utilizzando async/await:

async function getUserDataWorkflow() {
  try {
    const auth = await authenticate('user_login');
    console.log("Autenticato!");
    
    const profile = await getProfile(auth.token);
    console.log("Profilo recuperato:", profile.name);
    
    const orders = await getOrders(profile.id);
    console.log("Ordini trovati:", orders);
    
    return { profile, orders };
  } catch (error) {
    console.error("Errore nel workflow:", error);
    throw error; // Propaga l'errore se necessario
  }
}

getUserDataWorkflow();

Perché usare async/await invece di .then()?

  1. Leggibilità: Il codice è più lineare e facile da leggere.
  2. Gestione Errori: Possiamo usare il classico blocco try...catch, lo stesso che usiamo per il codice sincrono.
  3. Debugging: I debugger degli IDE gestiscono meglio i passi sequenziali di await rispetto alle callback di .then().

Esempi Pratici e Casi d'Uso Reali

Caso 1: Fetch API per caricare dati JSON

L'esempio più comune di Promise oggi è l'utilizzo di fetch(). fetch restituisce una Promise che risolve a un oggetto Response.

async function loadPosts() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) throw new Error("Errore HTTP: " + response.status);
    
    const data = await response.json(); // .json() restituisce a sua volta una Promise
    console.log("Post caricati:", data.slice(0, 5));
  } catch (error) {
    console.error("Errore nel fetch:", error);
  }
}

Caso 2: Implementazione di un Timeout

Possiamo usare Promise.race per evitare che l'utente rimanga in attesa infinita di una risposta dal server.

const timeout = (ms) => new Promise((_, reject) => 
  setTimeout(() => reject(new Error("Richiesta scaduta (Timeout)")), ms)
);

async function fetchWithTimeout(url) {
  try {
    // Gareggia tra la fetch e il timer di 5 secondi
    const response = await Promise.race([
      fetch(url),
      timeout(5000)
    ]);
    return await response.json();
  } catch (error) {
    console.error(error.message);
  }
}

Errori Comuni e FAQ

1. Dimenticare l'await

Un errore frequente è dimenticare la parola chiave await davanti a una funzione asincrona. In questo caso, la variabile non conterrà il risultato dell'operazione, ma l'oggetto Promise stesso in stato Pending.

2. Non gestire i rifiuti (Uncaught Promise Rejection)

Se una Promise viene rifiutata e non c'è un .catch() o un blocco try...catch, JavaScript genererà un errore di "Uncaught (in promise)". Questo può causare crash in ambienti Node.js o messaggi di errore fastidiosi nella console del browser.

3. Eseguire await in un ciclo for

Usare await all'interno di un ciclo for standard esegue le operazioni in sequenza. Se le operazioni sono indipendenti, questo rallenta l'applicazione. In questi casi, è meglio creare un array di Promise e usare Promise.all().

Prossimi Passi

Ora che hai padroneggiato le Promise, puoi approfondire altri concetti legati alla gestione del tempo e della concorrenza in JavaScript:

  • Event Loop: Studia come JavaScript gestisce la coda dei messaggi (Task Queue) e la Microtask Queue (dove finiscono le Promise).
  • Generators: Scopri le funzioni function* che permettono di mettere in pausa l'esecuzione del codice.
  • Web Workers: Impara a spostare calcoli pesanti in thread separati per non bloccare il Main Thread dell'interfaccia utente.
  • Observables (RxJS): Se lavori con React o Angular, esplora gli Observables, che sono come Promise ma possono emettere più valori nel tempo invece di uno solo.

Continua a leggere