Hoe werk je met asynchrone JavaScript?

Ik werk met asynchroniteit in JavaScript met behulp van callbacks, promises en async/await.

Callbacks zijn functies die worden doorgegeven aan andere functies als argumenten en worden uitgevoerd nadat een operatie is voltooid. Ze kunnen leiden tot "callback-hell" bij genestheid.

// Voorbeeld van callback
function fetchData(callback) {
  setTimeout(() => {
    callback("Gegevens ontvangen");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // Toont "Gegevens ontvangen" na 1 seconde
});

Promises zijn objecten die de uiteindelijke voltooiing of mislukking van een asynchrone operatie vertegenwoordigen. Ze maken het werken met asynchrone code eenvoudiger, en voorkomen diepe geneste code. Ze hebben drie staten: pending (in afwachting), fulfilled (voltooid), rejected (afgewezen).

// Voorbeeld van promise
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Gegevens ontvangen");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // Toont "Gegevens ontvangen" na 1 seconde
  })
  .catch((error) => {
    console.error("Fout:", error);
  });

Async/await is syntactisch suiker over promises die de asynchrone code leesbaarder maakt, vergelijkbaar met synchrone code. Een functie gemarkeerd met async geeft altijd een promise terug. De operator await kan alleen binnen async functies worden gebruikt en pauzeert de uitvoering totdat de promise is opgelost of afgewezen.

// Voorbeeld van async/await
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Gegevens ontvangen");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Toont "Gegevens ontvangen" na 1 seconde
  } catch (error) {
    console.error("Fout:", error);
  }
}

processData();

Ik gebruik vaak async/await bij API-aanvragen, omdat dit de meest handige en leesbare manier is om asynchrone operaties te verwerken. Voor gelijktijdige uitvoering van meerdere asynchrone operaties gebruik ik Promise.all() of Promise.allSettled().

Ik gebruik de event loop om de volgorde van uitvoering van asynchrone code, microtaken en macro-taken te begrijpen.