Codice Asincrono in JavaScript

Introduzione

La programmazione asincrona è un concetto fondamentale in JavaScript che permette di gestire operazioni che richiedono tempo senza bloccare l’esecuzione del codice. A differenza del codice sincrono che esegue istruzioni sequenzialmente, il codice asincrono permette di avviare operazioni e continuare l’esecuzione mentre si attende il loro completamento.

Questo capitolo approfondisce:

• Codice sincrono vs asincrono: differenze e quando usare ciascun approccio
• Single-threading: come JavaScript gestisce l’esecuzione del codice
• Event loop e message queue: meccanismo interno per gestire operazioni asincrone
• Callbacks: funzioni passate come argomenti per gestire operazioni asincrone
• Promises: oggetti che rappresentano il completamento futuro di un’operazione
• Async/await: sintassi alternativa per lavorare con promises
• Orchestrazione: metodi per coordinare multiple operazioni asincrone

Codice Sincrono

Il codice sincrono è quello che viene eseguito sequenzialmente, una riga dopo l’altra, in ordine. Ogni operazione deve completarsi prima che la successiva possa iniziare.

Esecuzione Sequenziale

1
console.log('Prima operazione');
2
const button = document.querySelector('button');
3
button.disabled = true;
4
console.log('Dopo la disabilitazione');

In questo esempio, ogni riga viene eseguita solo dopo che la precedente è completata. JavaScript è single-threaded, il che significa che può eseguire solo un’operazione alla volta.

Single-Threading

Il fatto che JavaScript sia single-threaded significa che:

• Solo un’operazione può essere eseguita alla volta
• Le operazioni vengono eseguite in sequenza, non in parallelo
• L’ordine di esecuzione è garantito e prevedibile

1
// Queste operazioni vengono eseguite nell'ordine scritto
2
const element = document.querySelector('.my-element');
3
element.classList.add('active');
4
console.log('Elemento attivato');

Se JavaScript fosse multi-threaded, potrebbe eseguire più operazioni simultaneamente, ma questo introdurrebbe problemi di race conditions e renderebbe difficile garantire l’ordine di esecuzione.

Quando il Codice Sincrono è un Problema

Il codice sincrono diventa problematico quando si hanno operazioni che richiedono tempo:

1
console.log('Inizio');
2
setTimeout(() => {
3
  console.log('Timer completato');
4
}, 2000);
5
console.log('Fine');

Se setTimeout fosse sincrono, il codice si bloccherebbe per 2 secondi prima di eseguire la riga successiva, impedendo qualsiasi altra operazione.

Altri esempi di operazioni che richiedono tempo:

• HTTP requests: richieste al server che possono richiedere secondi
• Geolocation: ottenere la posizione dell’utente può richiedere tempo
• File operations: leggere/scrivere file può essere lento
• Database queries: interrogazioni al database possono richiedere tempo

Se queste operazioni fossero sincrone, bloccherebbero completamente l’esecuzione del codice, rendendo l’applicazione non responsiva.

Codice Asincrono

Il codice asincrono permette di avviare operazioni che richiedono tempo senza bloccare l’esecuzione del resto del codice. Quando si avvia un’operazione asincrona, il codice continua a eseguire le righe successive mentre l’operazione viene gestita dal browser.

Come Funziona

Quando si chiama una funzione asincrona come setTimeout, succede quanto segue:

1. La funzione viene eseguita e delega l’operazione al browser
2. Il browser gestisce l’operazione in un thread separato
3. Il codice JavaScript continua immediatamente con le righe successive
4. Quando l’operazione è completata, il browser comunica il risultato a JavaScript

1
console.log('Prima del timer');
2
setTimeout(() => {
3
  console.log('Timer completato');
4
}, 2000);
5
console.log('Dopo il timer');
6
// Output:
7
// "Prima del timer"
8
// "Dopo il timer" (immediatamente)
9
// "Timer completato" (dopo 2 secondi)

Callback Functions

Per permettere al browser di comunicare quando un’operazione asincrona è completata, si usano callback functions (funzioni di callback):

1
setTimeout(() => {
2
  console.log('Timer completato');
3
}, 2000);

La funzione passata a setTimeout è una callback che viene eseguita quando il timer scade. Lo stesso principio si applica agli event listener:

1
button.addEventListener('click', function() {
2
  console.log('Button clicked');
3
});

Quando si registra un event listener, si delega al browser il compito di monitorare i click. Il codice JavaScript continua l’esecuzione, e quando l’utente clicca, il browser esegue la callback.

Operazioni che Bloccano

Non tutte le operazioni possono essere delegate al browser. Un loop lungo, ad esempio, deve essere eseguito completamente prima che altre operazioni possano procedere:

1
let result = 0;
2
for (let i = 0; i < 100000000; i++) {
3
  result += i;
4
}
5
console.log(result);

Durante l’esecuzione di questo loop, anche le callback in attesa (come quelle di event listener o timer) devono aspettare che il loop finisca. Questo dimostra il single-threading di JavaScript: quando il call stack è occupato, nulla altro può essere eseguito.

Event Loop e Message Queue

Per gestire il codice asincrono, JavaScript e il browser utilizzano un meccanismo chiamato event loop insieme a una message queue.

Componenti del Sistema

1. Call Stack: dove vengono eseguite le funzioni JavaScript

2. Browser APIs: funzionalità del browser (timer, HTTP requests, geolocation) che possono essere chiamate da JavaScript

3. Message Queue: coda di callback in attesa di essere eseguite

4. Event Loop: meccanismo che controlla se il call stack è vuoto e sposta callback dalla message queue al call stack

Come Funziona l’Event Loop

1
function greet() {
2
  console.log('Hello');
3
}
4

5
function showAlert() {
6
  alert('Timer done!');
7
}
8

9
setTimeout(showAlert, 2000);
10
greet();

Sequenza di esecuzione:

1. setTimeout viene chiamato e delega il timer al browser
2. setTimeout termina immediatamente (non blocca)
3. greet() viene eseguita e stampa “Hello”
4. Il call stack è vuoto
5. Dopo 2 secondi, il browser aggiunge showAlert alla message queue
6. L’event loop vede che il call stack è vuoto e sposta showAlert dal message queue al call stack
7. showAlert viene eseguita e mostra l’alert

Importanza dell’Event Loop

L’event loop garantisce che:

• Le callback asincrone vengano eseguite solo quando il call stack è vuoto
• Il codice sincrono abbia sempre priorità
• Le operazioni asincrone non blocchino l’esecuzione del codice principale

1
setTimeout(() => {
2
  console.log('Timer');
3
}, 0);
4

5
console.log('Sync code');
6
// Output:
7
// "Sync code" (prima)
8
// "Timer" (dopo)

Anche con un timer di 0 millisecondi, la callback viene eseguita dopo il codice sincrono perché deve passare attraverso la message queue e l’event loop.

Callbacks

Le callback functions sono funzioni passate come argomenti ad altre funzioni, che vengono eseguite quando un’operazione è completata. Sono il metodo tradizionale per gestire codice asincrono.

Esempio con Geolocation

1
navigator.geolocation.getCurrentPosition(
2
  function(positionData) {
3
    console.log(positionData);
4
  },
5
  function(error) {
6
    console.log(error);
7
  }
8
);

getCurrentPosition accetta due callback:

• Success callback: eseguita quando la posizione viene ottenuta con successo
• Error callback: eseguita se si verifica un errore

Callback Hell

Quando si hanno multiple operazioni asincrone dipendenti, si può finire in una situazione chiamata callback hell:

1
getCurrentPosition((position) => {
2
  setTimeout(() => {
3
    console.log(position);
4
    anotherAsyncOperation((result) => {
5
      yetAnotherAsyncOperation((finalResult) => {
6
        console.log(finalResult);
7
      });
8
    });
9
  }, 2000);
10
});

Problemi del callback hell:

• Codice difficile da leggere e mantenere
• Difficile tracciare il flusso di esecuzione
• Gestione degli errori complessa
• Variabili accessibili attraverso closure possono creare confusione

Questo pattern diventa rapidamente ingestibile quando si hanno più di 2-3 livelli di nesting.

Promises

Le Promises sono oggetti che rappresentano il completamento (o il fallimento) futuro di un’operazione asincrona. Permettono di scrivere codice asincrono in modo più leggibile e gestibile rispetto ai callback.

Cos’è una Promise

Una Promise è un oggetto che può trovarsi in uno di questi stati:

• Pending: l’operazione è in corso
• Resolved/Fulfilled: l’operazione è completata con successo
• Rejected: l’operazione è fallita

Creare una Promise

1
function setTimer(duration) {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      resolve('Timer done!');
5
    }, duration);
6
  });
7
}

Il costruttore Promise accetta una funzione che riceve due parametri:

• resolve: funzione da chiamare quando l’operazione ha successo
• reject: funzione da chiamare quando l’operazione fallisce

Usare una Promise

1
setTimer(2000)
2
  .then((data) => {
3
    console.log(data); // "Timer done!"
4
  });

Il metodo then() viene chiamato quando la Promise viene risolta. Riceve come argomento il valore passato a resolve().

Promisificare API Esistenti

Molte API del browser usano ancora callbacks. Si possono “promisificare” wrappandole in una Promise:

1
function getPosition() {
2
  return new Promise((resolve, reject) => {
3
    navigator.geolocation.getCurrentPosition(
4
      (positionData) => resolve(positionData),
5
      (error) => reject(error)
6
    );
7
  });
8
}

Ora si può usare getPosition() con la sintassi delle Promise invece dei callback.

Promise Chaining

Il promise chaining permette di concatenare multiple operazioni asincrone in sequenza, evitando il callback hell.

Sintassi Base

1
getPosition()
2
  .then((positionData) => {
3
    console.log(positionData);
4
    return setTimer(2000);
5
  })
6
  .then((timerData) => {
7
    console.log(timerData);
8
  });

Ogni then() restituisce una nuova Promise. Se si restituisce un valore nel then(), viene automaticamente wrappato in una Promise risolta.

Passare Dati tra Step

1
let positionData;
2

3
getPosition()
4
  .then((posData) => {
5
    positionData = posData;
6
    return setTimer(2000);
7
  })
8
  .then((timerData) => {
9
    console.log(positionData); // Disponibile grazie alla closure
10
    console.log(timerData);
11
  });

Si può anche restituire una Promise nel then():

1
getPosition()
2
  .then((positionData) => {
3
    return setTimer(2000); // Restituisce una Promise
4
  })
5
  .then((timerData) => {
6
    // Eseguito quando setTimer completa
7
    console.log(timerData);
8
  });

Quando si restituisce una Promise, il prossimo then() aspetta che quella Promise si risolva prima di eseguire.

Vantaggi del Chaining

• Leggibilità: codice lineare invece di nesting profondo
• Manutenibilità: più facile aggiungere o rimuovere step
• Gestione errori: errori possono essere gestiti centralmente

Gestione Errori con Promises

Le Promise forniscono diversi modi per gestire gli errori quando un’operazione asincrona fallisce.

Usare reject

Quando si crea una Promise, si può chiamare reject() per indicare un errore:

1
function getPosition() {
2
  return new Promise((resolve, reject) => {
3
    navigator.geolocation.getCurrentPosition(
4
      (positionData) => resolve(positionData),
5
      (error) => reject(error) // Chiamare reject in caso di errore
6
    );
7
  });
8
}

Gestire Errori con then

Il metodo then() accetta un secondo argomento per gestire gli errori:

1
getPosition()
2
  .then(
3
    (positionData) => {
4
      console.log(positionData);
5
    },
6
    (error) => {
7
      console.log('Errore:', error);
8
    }
9
  );

Usare catch

Un modo più pulito è usare il metodo catch():

1
getPosition()
2
  .then((positionData) => {
3
    console.log(positionData);
4
  })
5
  .catch((error) => {
6
    console.log('Errore:', error);
7
  });

catch() cattura qualsiasi errore o rejection che si verifica nella catena di Promise prima di esso.

Comportamento degli Errori

Quando una Promise viene rifiutata:

• Tutti i then() successivi vengono saltati
• Si passa direttamente al catch() più vicino
• Dopo il catch(), la catena può continuare se il catch() restituisce un valore

1
getPosition()
2
  .then((positionData) => {
3
    // Saltato se getPosition fallisce
4
    return setTimer(2000);
5
  })
6
  .catch((error) => {
7
    // Eseguito se getPosition fallisce
8
    return 'Fallback value';
9
  })
10
  .then((data) => {
11
    // Eseguito dopo il catch (con 'Fallback value')
12
    console.log(data);
13
  });

Stati delle Promise

Una Promise può essere in uno di questi stati:

• PENDING: l’operazione è in corso, né then() né catch() vengono eseguiti
• RESOLVED: la Promise è risolta, then() viene eseguito
• REJECTED: la Promise è stata rifiutata, catch() viene eseguito
• SETTLED: la Promise è completata (risolta o rifiutata), si può usare finally()

Metodo finally

Il metodo finally() viene eseguito sempre, sia che la Promise sia risolta o rifiutata:

1
getPosition()
2
  .then((positionData) => {
3
    console.log(positionData);
4
  })
5
  .catch((error) => {
6
    console.log('Errore:', error);
7
  })
8
  .finally(() => {
9
    // Eseguito sempre, per cleanup o operazioni finali
10
    console.log('Operazione completata');
11
  });

finally() non restituisce una nuova Promise e viene raggiunto solo quando la Promise è completamente settled.

Async/Await

Async/await è una sintassi alternativa per lavorare con le Promise che rende il codice asincrono simile al codice sincrono, migliorando la leggibilità.

Funzioni Async

Una funzione marcata con async restituisce automaticamente una Promise:

1
async function trackUser() {
2
  // Questa funzione restituisce una Promise
3
}

Anche se non si restituisce esplicitamente una Promise, la funzione viene wrappata automaticamente in una Promise.

Keyword await

La keyword await può essere usata solo dentro funzioni async. Fa “aspettare” che una Promise si risolva prima di continuare:

1
async function trackUser() {
2
  const positionData = await getPosition();
3
  console.log(positionData);
4
  // Questa riga viene eseguita solo dopo che getPosition() è completato
5
}

Trasformazione Dietro le Quinte

async/await non cambia il modo in cui JavaScript funziona. Il codice viene trasformato dietro le quinte in una catena di then():

1
// Codice con async/await
2
async function example() {
3
  const data = await somePromise();
4
  console.log(data);
5
}
6

7
// Equivalente a:
8
function example() {
9
  return somePromise()
10
    .then((data) => {
11
      console.log(data);
12
    });
13
}

Gestione Errori con try/catch

Con async/await, si può usare try/catch per gestire gli errori:

1
async function trackUser() {
2
  try {
3
    const positionData = await getPosition();
4
    const timerData = await setTimer(2000);
5
    console.log(positionData, timerData);
6
  } catch (error) {
7
    console.log('Errore:', error);
8
  }
9
}

Se una Promise viene rifiutata, viene lanciata un’eccezione che può essere catturata dal catch.

Variabili e Scope

Con async/await, le variabili sono disponibili nello scope della funzione:

1
async function trackUser() {
2
  let positionData;
3
  let timerData;
4

5
  try {
6
    positionData = await getPosition();
7
    timerData = await setTimer(2000);
8
  } catch (error) {
9
    console.log('Errore:', error);
10
  }
11

12
  // Le variabili sono disponibili qui
13
  console.log(positionData, timerData);
14
}

Limitazioni di async/await

1. Esecuzione sequenziale: tutto il codice nella funzione viene eseguito sequenzialmente:

1
async function example() {
2
  await getPosition(); // Aspetta
3
  setTimer(1000); // Eseguito solo dopo getPosition
4
  console.log('Done'); // Eseguito solo dopo setTimer
5
}

Se si vuole eseguire operazioni in parallelo, bisogna usare Promise.all() o chiamare le funzioni senza await.

2. Solo in funzioni: await può essere usato solo dentro funzioni async:

1
// ❌ Non funziona
2
const data = await getPosition();
3

4
// ✅ Funziona
5
(async () => {
6
  const data = await getPosition();
7
})();

Quando Usare async/await vs Promises

Usa async/await quando:

• Si hanno operazioni sequenziali dipendenti
• Si vuole codice più leggibile simile al codice sincrono
• Si preferisce try/catch per la gestione errori

Usa Promises con then/catch quando:

• Si vogliono eseguire operazioni in parallelo nella stessa funzione
• Si preferisce la sintassi esplicita delle Promise
• Si lavora con codice che non è dentro una funzione

Entrambi gli approcci sono validi e la scelta dipende dalle preferenze personali e dal contesto.

Orchestrazione di Multiple Promises

JavaScript fornisce metodi statici sulla classe Promise per coordinare multiple operazioni asincrone.

Promise.race()

Promise.race() restituisce una Promise che si risolve o rifiuta non appena una delle Promise nell’array si risolve o rifiuta:

1
Promise.race([
2
  getPosition(),
3
  setTimer(1000)
4
])
5
  .then((data) => {
6
    console.log(data); // Risultato della Promise più veloce
7
  });

Caso d’uso: quando si vuole eseguire un’operazione con un timeout:

1
Promise.race([
2
  getPosition(),
3
  setTimer(5000) // Timeout di 5 secondi
4
])
5
  .then((data) => {
6
    if (data.coords) {
7
      // Posizione ottenuta
8
    } else {
9
      // Timeout scaduto
10
    }
11
  });

Nota importante: le altre Promise continuano a eseguire, ma i loro risultati vengono ignorati.

Promise.all()

Promise.all() restituisce una Promise che si risolve quando tutte le Promise nell’array si risolvono:

1
Promise.all([
2
  getPosition(),
3
  setTimer(1000)
4
])
5
  .then((results) => {
6
    console.log(results);
7
    // Array con i risultati di tutte le Promise
8
    // results[0] = risultato di getPosition()
9
    // results[1] = risultato di setTimer(1000)
10
  });

Comportamento con errori: se una Promise viene rifiutata, Promise.all() viene immediatamente rifiutata:

1
Promise.all([
2
  getPosition(), // Se questa fallisce...
3
  setTimer(1000) // ...questa viene comunque eseguita ma il risultato è ignorato
4
])
5
  .catch((error) => {
6
    // Gestisce l'errore della prima Promise che fallisce
7
  });

Caso d’uso: quando si devono attendere tutti i risultati prima di procedere:

1
Promise.all([
2
  fetchUserData(),
3
  fetchUserSettings(),
4
  fetchUserPreferences()
5
])
6
  .then(([userData, settings, preferences]) => {
7
    // Usa tutti i dati insieme
8
    renderUserProfile(userData, settings, preferences);
9
  });

Promise.allSettled()

Promise.allSettled() attende che tutte le Promise si completino (sia risolte che rifiutate):

1
Promise.allSettled([
2
  getPosition(),
3
  setTimer(1000)
4
])
5
  .then((results) => {
6
    results.forEach((result, index) => {
7
      if (result.status === 'fulfilled') {
8
        console.log(`Promise ${index} risolta:`, result.value);
9
      } else {
10
        console.log(`Promise ${index} rifiutata:`, result.reason);
11
      }
12
    });
13
  });

Differenza con Promise.all():

• Promise.all() si rifiuta immediatamente se una Promise fallisce
• Promise.allSettled() attende sempre tutte le Promise, indipendentemente dal risultato

Caso d’uso: quando si vogliono conoscere i risultati di tutte le operazioni, anche se alcune falliscono:

1
Promise.allSettled([
2
  saveToDatabase(),
3
  sendEmail(),
4
  updateCache()
5
])
6
  .then((results) => {
7
    // Analizza quali operazioni sono riuscite e quali no
8
    const successful = results.filter(r => r.status === 'fulfilled');
9
    const failed = results.filter(r => r.status === 'rejected');
10

11
    console.log(`${successful.length} operazioni completate`);
12
    console.log(`${failed.length} operazioni fallite`);
13
  });

Confronto dei Metodi

Riepilogo

In questo capitolo si è esplorato il codice asincrono in JavaScript:

• Codice sincrono vs asincrono: JavaScript è single-threaded e esegue codice sequenzialmente, ma può delegare operazioni lunghe al browser
• Event loop: meccanismo che gestisce l’esecuzione di callback asincrone quando il call stack è vuoto
• Callbacks: metodo tradizionale per gestire operazioni asincrone, ma può portare a callback hell
• Promises: oggetti che rappresentano operazioni asincrone future, permettendo codice più leggibile
• Promise chaining: concatenare operazioni asincrone sequenziali senza nesting profondo
• Gestione errori: catch() e finally() per gestire errori nelle catene di Promise
• Async/await: sintassi alternativa che rende il codice asincrono simile al codice sincrono
• Orchestrazione: Promise.race(), Promise.all(), e Promise.allSettled() per coordinare multiple operazioni

Comprendere il codice asincrono è fondamentale per lo sviluppo JavaScript moderno, specialmente quando si lavora con API del browser, richieste HTTP e operazioni che richiedono tempo.