Aszinkron JS és a Fetch API

A régi weboldalakon, ha rákerestél valamire, vagy lapoztál egyet, az egész weboldal elsötétült, és újra be kellett töltenie. Ma, ha görgetsz a Facebookon, az új posztok folyamatosan, varázsütésre jelennek meg anélkül, hogy az oldal frissülne. Ezt a varázslatot az Aszinkron JavaScript végzi.

Az Éttermi Analógia (Szinkron vs. Aszinkron)

Képzeld el, hogy elmész egy étterembe.

• Szinkron működés: Leülsz, rendelsz egy pizzát. A pincér ott áll az asztalodnál 20 percig, amíg a pizza sül. Te nem tudsz beszélgetni, nem tudsz inni, az egész életed "lefagy", amíg meg nem kapod az ételt. A programozásban ez katasztrófa.
• Aszinkron működés: Rendelsz egy pizzát. A pincér felírja, bemegy a konyhába, te pedig addig nyugodtan beszélgetsz a barátaiddal és iszod a kóládat. Amikor a pizza kész van, a pincér kihozza neked. A weboldalad nem fagy le, amíg a háttérben az adatokra vár!

A Fetch API: A mi pincérünk

A modern JavaScriptben a fetch() parancsot használjuk arra, hogy a háttérben adatokat kérjünk le egy másik szerverről (például egy időjárás jelentést, vagy a legújabb blogposztokat).

Mivel a szerver válasza nem azonnali (lehet, hogy 1 másodperc, lehet, hogy 5), a fetch egy úgynevezett Promise-t (Ígéretet) ad vissza. "Ígérem, hogy szólok, ha megjött az adat."

// 1. Elküldjük a pincért (lekérjük az adatot egy külső címről)
fetch('https://jsonplaceholder.typicode.com/users/1')
    
    // 2. Amikor a szerver válaszol, a .then() blokk fut le
    .then(function(valasz) {
        // A szerver nyers adatot küld, ezt át kell alakítanunk JSON formátumba
        return valasz.json(); 
    })
    
    // 3. Amikor a JSON átalakítás kész, megkapjuk a tényleges adatot
    .then(function(adat) {
        console.log("A felhasználó neve: " + adat.name);
        
        // Itt már ki is írhatjuk a weboldalra a DOM manipulációval!
        document.getElementById("eredmeny").innerHTML = adat.name;
    })
    
    // 4. Ha hiba történik (pl. nincs internet), a .catch() blokk fut le
    .catch(function(hiba) {
        console.error("Hiba történt a lekérés során!", hiba);
    });

Mi az a JSON?

A fenti kódban láthattad a .json() szót. A JSON (JavaScript Object Notation) a web univerzális nyelve. Ez egy nagyon egyszerű, szöveges formátum, amiben a szerverek és a weboldalak adatokat cserélnek egymással. Úgy néz ki, mint egy lista, amiben "kulcs: érték" párok vannak.

{
    "nev": "Kovács Péter",
    "eletkor": 34,
    "foglalkozas": "Webfejlesztő"
}

A Fetch API segítségével a weboldalad képes a háttérben letölteni egy ilyen JSON fájlt, és a benne lévő adatokat gyönyörű HTML kártyákká alakítani a képernyőn. Így működnek a modern webáruházak és hírportálok!