# 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:
```javascript
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