3I_WTL_2025/25_fetch_await/README.md

25 - Moderní Fetch s Async / Await

🎯 Co se naučíte

V této lekci se naučíte moderní a přehlednější způsob práce s asynchronním kódem pomocí klíčových slov async a await.

📚 Témata lekce

• async / await - moderní syntax pro asynchronní operace
• try / catch / finally - komplexní ošetření chyb v asynchronním kódu
• Response.ok - kontrola úspěšnosti HTTP požadavku (stavové kódy 200-299)
• Dynamické generování HTML - vytváření seznamů a karet (cards) z JSON dat
• Vnořené požadavky - načítání souvisejících dat (např. příspěvky konkrétního uživatele)
• Stav aplikace - práce s UI během načítání (loading indicators, zablokování tlačítek)

📂 Soubory v projektu

• index.html - uživatelské rozhraní pro vyhledávání uživatelů a jejich příspěvků
• script.js - logika aplikace s využitím async/await a JSONPlaceholder API
• style.css - stylování výsledků a karet uživatelů

💻 Klíčové koncepty

Struktura async funkce s error handlingem:

async function nactiData() {
    try {
        const odpoved = await fetch(url);
        
        // Kontrola, zda server odpověděl úspěšně
        if (!odpoved.ok) {
            throw new Error("Data se nepodařilo načíst");
        }
        
        const data = await odpoved.json();
        // Práce s daty...
        
    } catch (error) {
        // Ošetření chyby
        console.error("Chyba:", error.message);
    } finally {
        // Provede se vždy (např. skrytí loaderu)
        console.log("Pokus o načtení dokončen");
    }
}

🚀 Jak s lekcí pracovat

1. Otevřete index.html.
2. Klikněte na "Načíst vše" pro zobrazení seznamu uživatelů.
3. Zadejte ID uživatele (1-10) a vyhledejte konkrétní osobu.
4. Po nalezení uživatele se aktivuje tlačítko pro načtení jeho příspěvků (postů).
5. Sledujte v script.js, jak jsou funkce řetězeny a jak se mění stav UI.

🔗 Související lekce

• Předchozí: 24_fetch - Fetch API se syntaxí .then()
• Následující: 26_localstorage - Ukládání dat v prohlížeči