13 frontend - 9. Aszinkron JavaScript: Callback-ek, Promises, Async/Await

Mi az a callback?

A callback egy függvény, amelyet egy másik függvény paramétereként adunk át. A callback célja, hogy egy művelet befejezése után további kódot futtassunk. Callback-eket gyakran használunk aszinkron műveletek, például hálózati kérések vagy időzített feladatok kezelésére.

Hogyan működik?
Amikor egy aszinkron műveletet végzünk, például egy adat lekérdezést az API-ból, nem várhatjuk el, hogy azonnal befejeződjön. Ehelyett, amikor az adatokat betöltöttük, a callback függvény hívódik meg, amely a művelet befejeződése után fut le.

Példa:

function fetchData(callback) {

    setTimeout(() => {

        console.log('Adatok betöltve');

        callback(); // Callback meghívása

    }, 1000); // 1 másodperces késleltetés

}

function onDataLoaded() {

    console.log('A callback függvény végrehajtása');

}

// fetchData hívása a onDataLoaded callback-kel

fetchData(onDataLoaded);

Magyarázat:
A fetchData függvény 1 másodpercet vár, majd kiírja, hogy "Adatok betöltve". Ezután meghívja a callback függvényt, amely a onDataLoaded-ként lett átadva, így kiírja, hogy "A callback függvény végrehajtása".

9.2 Promises

Mi az a Promise?
A Promise egy objektum, amely egy aszinkron művelet jövőbeli eredményét vagy hibáját képviseli. Három állapota van:

• Pending (függőben lévő): Az ígéret még nem teljesült, és nem is lett elutasítva.
• Fulfilled (teljesült): Az ígéret sikeresen teljesült, és az eredmény elérhető.
• Rejected (elutasított): Az ígéret nem teljesült, és egy hibaüzenet érhető el.

Hogyan működik?
A Promise-t akkor használjuk, amikor egy aszinkron műveletet szeretnénk végrehajtani és kezelni szeretnénk a sikeres és sikertelen befejeződést is.

Példa:

function fetchData() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            const success = true; // Simulált siker

            if (success) {

                console.log('Adatok betöltve');

                resolve(); // Promise teljesült

            } else {

                reject('Hiba történt'); // Promise elutasítva

            }

        }, 1000);

    });

}

// fetchData hívása és Promise kezelése

fetchData()

    .then(() => {

        console.log('A Promise sikeresen teljesült');

    })

    .catch(error => {

        console.error('Hiba:', error);

    });

Magyarázat:
A fetchData függvény egy új Promise-t ad vissza. A setTimeout után, ha a success érték true, akkor a Promise teljesül, és a .then() blokk fut le. Ha a success érték false, a Promise elutasításra kerül, és a .catch() blokk fut le.

9.3 Async/Await

Mi az az async/await?
Az async és await a Promise-ek egyszerűsített kezelési módjai. Az async kulcsszó egy függvényt aszinkronnak jelöl, ami automatikusan egy Promise-t ad vissza. Az await kulcsszó pedig várakozik egy Promise teljesülésére, mielőtt tovább lépne a következő sorra.

Hogyan működik?
Az async funkciók lehetővé teszik, hogy az aszinkron kódot szinkronnak tűnő módon írjuk, ami olvashatóbbá és karbantarthatóbbá teszi a kódot.

Példa:

function fetchData() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            const success = true; // Simulált siker

            if (success) {

                console.log('Adatok betöltve');

                resolve(); // Promise teljesült

            } else {

                reject('Hiba történt'); // Promise elutasítva

            }

        }, 1000);

    });

}

async function loadData() {

    try {

        await fetchData(); // Várakozás a fetchData Promise-ra

        console.log('Az async/await sikeresen teljesült');

    } catch (error) {

        console.error('Hiba:', error); // Hibakezelés

    }

}

// loadData hívása

loadData();

A loadData egy async függvény, amely az await kulcsszó segítségével várakozik a fetchData Promise-ra. Ha a Promise teljesül, a következő sorok futnak le, ellenkező esetben a catch blokk kezelni fogja a hibát.

Feladat: Adatfeldolgozó Rendszer

Feladat Leírása

A feladat célja, hogy készíts egy egyszerű alkalmazást, amely bemutatja az aszinkron JavaScript különböző módszereit. Az alkalmazásnak egy fiktív adatfeldolgozó rendszert kell szimulálnia, amely adatokat tölt le egy szerverről, és az adatokat feldolgozza.

Hozz létre egy js kiterjesztésű fájlt, az ellenőrzéshez, nyiss egy új terminált, és a „node fájlod neve” paranccsal tudod ellenőrizni az eredményt. Csak az aktuális mappád legyen megnyitva a vsc-ben.

Elvárt Funkcionalitás

1.     Adatletöltés: Készíts egy funkciót, amely szimulál egy aszinkron adatletöltést. Az adatletöltést egy setTimeout-tal kell szimulálni, amely 2 másodperc után visszaad egy adatobjektumot.

2.     Adatok Feldolgozása Callback-kel: Implementálj egy funkciót, amely a letöltött adatokat feldolgozza, és az eredményt egy callback függvény segítségével adja vissza.

3.     Adatok Feldolgozása Promises-szel: Implementálj egy funkciót, amely a letöltött adatokat feldolgozza, és a Promise API-t használja a feldolgozott adatok visszaadására.

4.     Adatok Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely az async/await segítségével dolgozza fel az adatokat.

A feladat végén az alkalmazás három különböző módon kell, hogy kiírja a feldolgozott adatokat a konzolra:

1. Callback használatával
2. Promise használatával
3. Async/await használatával

Minta: 

---

Feladat: Külső JSON Adatok Feldolgozása

Feladat Célja

A feladat célja, hogy gyakorold az aszinkron JavaScript technikák alkalmazását külső JSON API-val. A JSONPlaceholder API-t fogjuk használni, amely egy ingyenes, fiktív API, és lehetővé teszi, hogy különböző típusú JSON adatokat kérjünk le. A feladat során három különböző módszert fogunk használni az adatok feldolgozására: callback-eket, Promises-t és async/await-et.

API URL

Az adatok lekéréséhez használd az alábbi JSONPlaceholder API URL-t: https://jsonplaceholder.typicode.com/users

Feladat Leírása

1. Külső Adatok Lekérése: Készíts egy JavaScript funkciót, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ról.

2. Adatok Feldolgozása Callback-kel: Implementálj egy funkciót, amely a lekért adatokat egy callback segítségével dolgozza fel, és a feldolgozott adatokat egy HTML táblázatban jeleníti meg.

3. Adatok Feldolgozása Promises-szel: Implementálj egy funkciót, amely a lekért adatokat Promises segítségével dolgozza fel, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.

4. Adatok Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely async/await használatával dolgozza fel az adatokat, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.

Teendők

1. HTML és CSS Előkészítése:

   • Készíts egy HTML oldalt, amely tartalmaz egy táblázatot a felhasználói adatok megjelenítésére.
   • Hozz létre három gombot, amelyek különböző aszinkron módszerekkel történő adatfeldolgozást indítanak el.

2. JavaScript Implementáció:

   • Adatok Lekérése:
     • Implementálj egy fetchUsers függvényt, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ból.
   • Adatok Feldolgozása Callback-kel:
     • Implementálj egy processUsersWithCallback függvényt, amely a lekért adatokat callback-kel dolgozza fel.
     • Tedd lehetővé, hogy a feldolgozott adatokat a callback függvény a HTML táblázatban jelenítse meg.
   • Adatok Feldolgozása Promises-szel:
     • Implementálj egy processUsersWithPromise függvényt, amely a lekért adatokat Promises segítségével dolgozza fel.
     • Tedd lehetővé, hogy a feldolgozott adatokat a Promise .then() metódusában a HTML táblázatban jelenítse meg.
   • Adatok Feldolgozása Async/Await-tel:
     • Implementálj egy processUsersWithAsyncAwait függvényt, amely async/await használatával dolgozza fel az adatokat.
     • Tedd lehetővé, hogy a feldolgozott adatokat az async/await .then() metódusában a HTML táblázatban jelenítse meg.

3. HTML Táblázat Frissítése:

   • Készíts egy displayUsers függvényt, amely frissíti a HTML táblázatot a feldolgozott felhasználói adatokkal.

4. Gombok Eseménykezelése:

   • Adj hozzá eseménykezelőket a három gombhoz, amelyek az adatfeldolgozó funkciókat hívják meg és frissítik a táblázatot.

Elvárt Eredmény

1. Callback használatával: A felhasználói adatok a táblázatban jelennek meg a Callback funkció használatával.
2. Promise használatával: A felhasználói adatok a táblázatban jelennek meg a Promise használatával.
3. Async/Await használatával: A felhasználói adatok a táblázatban jelennek meg az Async/Await használatával.

Minta: