Waarom is de constructie async/await geïntroduceerd en hoe verbetert het het werken met asynchrone code?

Async/await is geïntroduceerd om het schrijven van asynchrone code te vereenvoudigen, waardoor het leesbaarder en onderhoudsvriendelijker wordt in vergelijking met traditionele callbacks of promises.

Hoe het verbetert:

1. Leesbaarheid: Code met async/await lijkt op synchrone, regel-voor-regel code, wat het begrip aanzienlijk vergemakkelijkt.
2. Foutafhandeling: Maakt het mogelijk om standaardconstructies zoals try/catch te gebruiken voor het afhandelen van fouten in asynchrone code, in tegenstelling tot .catch() in promises.
3. Debugging: Breakpoints werken zoals in synchrone code, wat het debuggen vereenvoudigt.
4. Minder "callback hell": Verwijdert het probleem van geneste callbacks, wat leidt tot onleesbare code.

Voorbeeld:

Code met promises:

// Voorbeeld met promises
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fout bij ophalen data:', error);
  });

Dezelfde code met async/await:

// Voorbeeld met async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fout bij ophalen data:', error);
  }
}

fetchData();

De constructie async/await is gebaseerd op promises en is syntactische suiker voor het werken ermee. Een functie gemarkeerd als async geeft altijd een promise terug. De await-operator kan alleen binnen async functies worden gebruikt en "wacht" op de resolutie van de promise, waarbij de opgeloste waarde wordt geretourneerd of een uitzondering wordt gegenereerd in geval van fout.