Miért vezették be az async/await szerkezetet, és hogyan javítja az aszinkron kód kezelését?

Az async/await bevezetésre került az aszinkron kód írásának egyszerűsítése érdekében, így olvashatóbbá és karbantarthatóbbá téve azt a hagyományos callback-ekhez vagy promise-hez képest.

Hogyan javítja:

1. Olvashatóság: Az async/await-tel írt kód szinkronnak tűnik, soronként, ami jelentősen megkönnyíti a megértést.
2. Hibakezelés: Lehetővé teszi a standard szerkezetek, például try/catch használatát a hibák kezelésére az aszinkron kódban, ellentétben a .catch()-el a promise-ken.
3. Hibakeresés: A töréspontok (breakpoints) ugyanúgy működnek, mint szinkron kódban, megkönnyítve a hibakeresést.
4. Kevesebb "callback hell": Kivonja a beágyazott callback problémáját, ami olvashatatlan kódhoz vezet.

Példa:

Promise-szal írt kód:

// Promise példa
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Hiba az adatok lekérésekor:', error);
  });

Ugyanez a kód async/await-tel:

// async/await példa
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('Hiba az adatok lekérésekor:', error);
  }
}

fetchData();

Az async/await szerkezet a promise-eken alapul, és szintaktikus cukor azok kezeléséhez. Az async-el jelölt függvény mindig promise-t ad vissza. Az await operátor csak async függvényeken belül használható, és "vár" a promise megoldódására, visszaadva annak feloldott értékét vagy kiváltva egy kivételt hiba esetén.