Aszinkron JavaScript

1Szinkron kód: egyszerre egy dolog

A JavaScript alapból szinkron: a sorok egymás után futnak le, és amíg egy sor be nem fejeződik, a következő nem indul el.

console.log("első");
console.log("második");
console.log("harmadik");

Kimenet — pontosan a várt sorrendben:

első
második
harmadik

Ez addig kényelmes, amíg minden művelet gyors. De mi van, ha egy sor sokáig tart?

Képzeld el, hogy a második sor egy adatbázis-lekérdezés, ami 200 ezredmásodpercig fut. Szinkron világban ez azt jelentené, hogy a program áll 200 ezredmásodpercig — és mivel a Node egy szálon futtatja a kódodat, ez alatt egyetlen másik kérést sem tudna kiszolgálni.

2Aszinkron kód: „szólj, ha kész”

Az aszinkron művelet elindul, a program pedig továbbmegy. Amikor a művelet befejeződik, a Node visszatér hozzá.

console.log("első");

setTimeout(() => {
  console.log("második — 2 másodperc múlva");
}, 2000);

console.log("harmadik");

Kimenet:

első
harmadik
második — 2 másodperc múlva

A „harmadik” hamarabb jelenik meg, mint a „második”. Ez nem hiba: a setTimeout csak beütemezte a feladatot, majd a program azonnal továbbment.

Ki csinálja a háttérben?

Amikor tehát „vársz” egy adatbázisra, nem a te szálad áll — hanem a Node egy másik része dolgozik, a te szálad pedig közben más kéréseket vesz fel.

3Hívási verem és eseményhurok

Nem kell mélyen érteni, de a fogalmakat ismerd fel, mert a hibaüzenetekben előkerülnek.

4A régi módszer: callback

A Promise előtt az aszinkron eredményt egy átadott függvénnyel kaptuk vissza. Ezt hívjuk callbacknek (visszahívás):

import fs from "node:fs";

fs.readFile("adatok.txt", "utf8", (hiba, tartalom) => {
  if (hiba) {
    console.error("Nem sikerült:", hiba.message);
    return;
  }
  console.log(tartalom);
});

console.log("ez hamarabb fut le!");

A harmadik paraméter egy függvény: a Node majd akkor hívja meg, amikor a fájl beolvasása kész.

Miért nem ezt használjuk?

Mert ha több művelet épül egymásra, a kód jobbra csúszik és olvashatatlanná válik:

olvasFajlt("a.txt", (h1, a) => {
  if (h1) return kezel(h1);
  olvasFajlt("b.txt", (h2, b) => {
    if (h2) return kezel(h2);
    olvasFajlt("c.txt", (h3, c) => {
      if (h3) return kezel(h3);
      console.log(a + b + c);          // ← itt vagyunk, négy szinttel beljebb
    });
  });
});

Ezt hívják callback pokolnak (callback hell). Figyeld meg: a hibakezelés is háromszor szerepel benne.

5A Promise — „ígéret az eredményre”

A Promise egy objektum, amely egy később megérkező értéket képvisel. Nem maga az érték, hanem az ígéret, hogy lesz érték (vagy hiba).

Használat: .then() és .catch()

import fs from "node:fs/promises";      // figyelj: a /promises változat!

fs.readFile("adatok.txt", "utf8")
  .then((tartalom) => {
    console.log(tartalom);
  })
  .catch((hiba) => {
    console.error("Nem sikerült:", hiba.message);
  })
  .finally(() => {
    console.log("ez mindenképp lefut");
  });

Láncolás

A .then() visszatérési értéke újabb Promise, ezért fűzhető tovább — így a beljebb csúszás megszűnik:

olvasFajlt("a.txt")
  .then((a) => olvasFajlt("b.txt"))
  .then((b) => olvasFajlt("c.txt"))
  .then((c) => console.log("kész"))
  .catch((hiba) => console.error(hiba.message));   // EGY hibakezelő az egész láncra

Ez már sokkal jobb — de van ennél is olvashatóbb megoldás.

6async / await — a mindennapi eszközöd

Az async és az await kulcsszó nem új működés, csak egy olvashatóbb írásmód ugyanarra a Promise-ra.

import fs from "node:fs/promises";

async function beolvas() {
  const tartalom = await fs.readFile("adatok.txt", "utf8");
  console.log(tartalom);
}

beolvas();

Ugyanaz háromféleképpen

Nézd meg egymás mellett — mindhárom ugyanazt csinálja:

olvasFajlt("a.txt", (hiba, tart) => {
  if (hiba) {
    return console.error(hiba);
  }
  console.log(tart);
});

olvasFajlt("a.txt")
  .then((tart) => {
    console.log(tart);
  })
  .catch((hiba) => {
    console.error(hiba);
  });

try {
  const tart =
    await olvasFajlt("a.txt");
  console.log(tart);
} catch (hiba) {
  console.error(hiba);
}

A harmadik változat majdnem úgy néz ki, mint a hagyományos kód — pedig nem blokkol.

Hol használható az await?

• async függvényen belül — bárhol;
• ESM-modul legfelső szintjén (top-level await) — mert a "type": "module" beállítással a fájlod modul. Ez működik, de a függvényen belüli használat a gyakoribb.

// index.js — ESM-modulban ez is működik
const adat = await olvasFajlt("config.json");

7Hibakezelés aszinkron kódban

Ez a rész legalább olyan fontos, mint maga az await.

async function termekLekeres(id) {
  try {
    const valasz = await fetch(`https://api.pelda.hu/products/${id}`);

    if (!valasz.ok) {                                  // a fetch NEM dob hibát 404-nél!
      throw new Error(`A szerver ${valasz.status} kóddal válaszolt`);
    }

    const termek = await valasz.json();
    return termek;
  } catch (hiba) {
    console.error("Nem sikerült lekérni a terméket:", hiba.message);
    throw hiba;                                        // továbbadjuk a hívónak
  }
}

8Sorosan vagy párhuzamosan?

Ez az a rész, ahol az await könnyen lassú kódot eredményez.

Sorosan — gyakran felesleges

const a = await lekeres("A");   // 1 mp
const b = await lekeres("B");   // + 1 mp
const c = await lekeres("C");   // + 1 mp
// összesen kb. 3 másodperc

Ez akkor helyes, ha b-hez kell a eredménye. De ha a három művelet független egymástól, feleslegesen várunk.

Párhuzamosan — Promise.all

const [a, b, c] = await Promise.all([
  lekeres("A"),
  lekeres("B"),
  lekeres("C"),
]);
// összesen kb. 1 másodperc — a leglassabbé

9A négy leggyakoribb kezdő hiba

1) Elfelejtett await

async function rosszul() {
  const termek = lekeres(42);      // ❌ hiányzik az await
  console.log(termek.nev);         // TypeError: Cannot read properties of undefined
}

A termek változóban nem a termék van, hanem maga a Promise. Ha kiíratod:

Promise { <pending> }

2) await nem async függvényben

function rosszul() {
  const adat = await lekeres();    // ❌ SyntaxError
}

A hibaüzenet attól függ, milyen modulrendszert használsz — és pont a mi esetünkben a kevésbé beszédes:

3) Felesleges async

async function osszead(a, b) {     // ❌ semmi aszinkron nincs benne
  return a + b;
}

Ez működik, de félrevezető: aki látja, azt hiszi, van benne várakozás — ráadásul a visszatérési érték Promise lesz, tehát a hívónak await-elnie kell. Csak akkor tedd ki, ha tényleg van benne await.

4) await ciklusban, feleslegesen

for (const id of azonositok) {
  const t = await lekeres(id);
  eredmenyek.push(t);
}

const eredmenyek = await Promise.all(
  azonositok.map((id) => lekeres(id))
);

10Amivel a gyakorlatban találkozol

A fetch a Node 21 óta beépített — nem kell hozzá csomagot telepíteni.

Miért két await a fetch-nél?

const valasz = await fetch(url);     // 1) megjött a VÁLASZ FEJRÉSZE
const adat = await valasz.json();    // 2) beolvastuk és JSON-ná alakítottuk a TÖRZSET

A válasz fejlécei hamarabb megérkeznek, mint a teljes törzs — ezért két lépés. Ez elsőre furcsa, de logikus: a státuszkódot már azelőtt megnézheted, hogy letöltenéd a tartalmat.

11Feladatok

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

function adatLekeres() {
  const adat = await fetch("https://pelda.hu/api");
  return adat;
}

async function fo() {
  const t = lekeresTermek(1);
  console.log(t);
}

lekeres("/api/users/1")
  .then((u) => lekeres(`/api/orders?userId=${u.id}`))
  .then((r) => console.log(r.length))
  .catch((e) => console.error(e.message));

function varj(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

12Önellenőrző kvíz

13Összegzés

14Fogalomtár