Hogyan dolgozik aszinkron JavaScript-tel?

Aszinkron műveletekkel JavaScript-ben callback-ek, promise-ok és async/await segítségével dolgozom.

A callback-ek olyan függvények, amelyeket más függvények argumentumaként adunk át, és egy művelet befejezése után futnak le. Bonyolultabb beágyazás esetén "callback pokolhoz" vezethetnek.

// Callback példa
function fetchData(callback) {
  setTimeout(() => {
    callback("Adatok megérkeztek");
  }, 1000);
}

fetchData((data) => {
  console.log(data); // 1 másodperc múlva kiírja, hogy "Adatok megérkeztek"
});

A promise-ok olyan objektumok, amelyek egy aszinkron művelet végleges befejezését vagy sikertelenségét reprezentálják. Egyszerűsítik az aszinkron kód kezelését, elkerülve a mély beágyazást. Három állapotuk van: pending (függőben), fulfilled (teljesült), rejected (elutasítva).

// Promise példa
function fetchDataPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Adatok megérkeztek");
    }, 1000);
  });
}

fetchDataPromise()
  .then((data) => {
    console.log(data); // 1 másodperc múlva kiírja, hogy "Adatok megérkeztek"
  })
  .catch((error) => {
    console.error("Hiba:", error);
  });

Az async/await a promise-okon alapuló szintaktikus cukor, amely olvashatóbbá teszi az aszinkron kódot, hasonlóvá a szinkronhoz. Egy async-al jelölt függvény mindig promise-t ad vissza. Az await csak async függvényen belül használható, és megállítja a végrehajtást, amíg a promise nem teljesül vagy elutasításra kerül.

// async/await példa
async function fetchDataAsync() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Adatok megérkeztek");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // 1 másodperc múlva kiírja, hogy "Adatok megérkeztek"
  } catch (error) {
    console.error("Hiba:", error);
  }
}

processData();

Gyakran használom az async/await-et API-kéréseknél, mivel ez a legkényelmesebb és legolvasmányosabb módja az aszinkron műveletek kezelésének. Több aszinkron művelet párhuzamos végrehajtásához a Promise.all() vagy a Promise.allSettled()-et használom.

Az event loop segítségével megértem az aszinkron kód végrehajtási sorrendjét, a mikro- és makro-feladatokat.