A JS rejtelmei amikkel érdemes tisztában lenni: promise, async és az await

Az async, await és a Promise kulcsfontosságú eszközök a JavaScript-ben az aszinkron műveletek kezelésére. Ezek segítségével az aszinkron kódot szinkron stílusban írhatjuk meg, ami átláthatóbbá és könnyebben karbantarthatóvá teszi a kódot.

Az async, await és a Promise előnyei:

1. Olvashatóság: Szinkron stílusú kód írása aszinkron feladatokhoz.
2. Hatékonyság: Nem blokkolják a fő szálat, támogatják a párhuzamos feldolgozást.
3. Egyszerű hibakezelés: Könnyű és átlátható megoldás a hibák kezelésére.
4. Modularitás: Az egyes komponensek könnyen újrafelhasználhatók és tesztelhetők.
5. Széles támogatottság: A JavaScript szabvány részét képezik, és a legtöbb modern környezet támogatja őket.

Promise

A Promise egy olyan objektum, amely egy később teljesülő (vagy elutasított) értéket reprezentál. Alap szinten kezeli az aszinkron kódot, láncolással (.then, .catch) érjük el az eredményt vagy kezeljük a hibát:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Próbáljuk ki true és false értékkel
            if (success) {
                resolve("Adat sikeresen betöltve!");
            } else {
                reject("Hiba történt az adatok betöltése közben.");
            }
        }, 2000);
    });
}

fetchData()
    .then((data) => console.log(data)) // Ha sikeres, itt kapjuk meg az adatot
    .catch((error) => console.error(error)); // Ha hiba történik, itt kezeljük

Async/Await

Az async kulcsszóval ellátott függvény mindig egy Promise-t ad vissza. Az await kulcsszó pedig azt jelzi, hogy meg kell várni egy Promise teljesülését, mielőtt a következő művelet végrehajtódik. Szinkron stílusban írható meg az aszinkron kód, ami tisztább és könnyebben olvashatóvá teszi:

async function getData() {
    try {
        console.log("Adatok betöltése...");
        const data = await fetchData(); // Várja a fetchData Promise teljesülését
        console.log(data);
    } catch (error) {
        console.error(error); // Ha hiba történik, itt kezeljük
    }
}

getData();

// Promise verzió
fetchData().then(console.log).catch(console.error);

// Async/Await verzió
(async () => {
    try {
        const result = await fetchData();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
})();