Fetch API ve Asenkron JavaScript

Fetch API

// Veri çekme
fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(data => {
        data.forEach(user => {
            console.log(\`${user.name} - ${user.email}\`);
        });
    })
    .catch(error => console.error("Hata:", error));

// async/await ile (önerilen)
async function kullanicilariGetir() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await response.json();
        
        data.forEach(user => {
            console.log(\`${user.name} - ${user.email}\`);
        });
    } catch (error) {
        console.error("Hata:", error);
    }
}

kullanicilariGetir();

API Verisi ile Kart Oluşturma

async function urunleriGoster() {
    const res = await fetch("https://fakestoreapi.com/products?limit=6");
    const urunler = await res.json();
    
    const container = document.getElementById("urunler");
    
    urunler.forEach(urun => {
        container.innerHTML += \`
            <div class="urun-kart">
                <img src="${urun.image}" alt="${urun.title}">
                <h3>${urun.title.substring(0, 30)}...</h3>
                <p class="fiyat">$${urun.price}</p>
                <button>Sepete Ekle</button>
            </div>
        \`;
    });
}

urunleriGoster();