Come lavori con JavaScript asincrono?

Lavoro con l'asynchronous in JavaScript utilizzando callback, promesse e async/await.

I callback sono funzioni passate ad altre funzioni come argomenti e vengono eseguite dopo il completamento di un'operazione. Possono portare a "inferni di callback" quando sono annidati.

// Esempio di callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Dati ricevuti");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Mostrerà "Dati ricevuti" dopo 1 secondo
});

Le promesse sono oggetti che rappresentano il completamento o il fallimento di un'operazione asincrona. Facilitano il lavoro con il codice asincrono, evitando annidamenti profondi. Hanno tre stati: pending (in attesa), fulfilled (completata), rejected (rifiutata).

// Esempio di promessa
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dati ricevuti");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Mostrerà "Dati ricevuti" dopo 1 secondo
  })
  .catch((error) => {
    console.error("Errore:", error);
  });

Async/await è zucchero sintattico sui promise che rende il codice asincrono più leggibile, simile a quello sincrono. Una funzione contrassegnata con async restituisce sempre una promise. L'operatore await può essere usato solo all’interno di funzioni async e sospende l’esecuzione finché la promise non viene risolta o rifiutata.

// Esempio di async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Dati ricevuti");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Mostrerà "Dati ricevuti" dopo 1 secondo
  } catch (error) {
    console.error("Errore:", error);
  }
}

processData();

Spesso uso async/await quando lavoro con richieste API, poiché è il modo più comodo e leggibile per gestire operazioni asincrone. Per eseguire più operazioni asincrone in parallelo, uso Promise.all() o Promise.allSettled().

Utilizzo l’event loop per capire l’ordine di esecuzione del codice asincrono, microtask e macrotask.