API'den görsel listesi çekme

async/await ile bir API'den görsel listesini çekip json olarak alırsın.

async/await ile fetch

Bir async fonksiyon içinde await ile fetch çağrısını bekletiriz. fetch(url) bir Response nesnesi döndürür; başarılıysa response.ok true olur.

Akış şöyledir:

const response = await fetch(url) ile isteği beklet
if (!response.ok) ile hata denetle
await response.text() ile gövdeyi al

Bu deseni fetchImages adında bir fonksiyonda toplayacağız.

try/catch ile hata yakalama

Ağ istekleri çeşitli nedenlerle başarısız olabilir: yanlış adres, bağlantı kopması veya sunucu hatası. try bloğu içine alınmış await çağrısı bir hata fırlatırsa, denetim catch bloğuna geçer.

Örneğin:

try {
  const response = await fetch(url);
} catch (error) {
  console.log(error.message);
}

Böylece uygulama çökmeden hatayı yakalarız.

Uygulama fetchImages fonksiyonunu yaz

Önceki dersin çözümünün üzerine devam et. url parametresi alan fetchImages adında bir async fonksiyon yaz. try bloğunda const response = await fetch(url) ile yanıtı al; if (!response.ok) ise throw new Error('HTTP ' + response.status) fırlat. Sonra return await response.text() ile gövdeyi döndür. catch (error) bloğunda console.log(error.message) ile hatayı yazdır.

Örnek çözümü göster

async function fetchImages(url) ile başla, try bloğunda fetch ve response.ok denetimini yap, return await response.text() ile döndür, catch (error) ile hatayı console.log ile yazdır.

Örnek çözüm:
// Galeri uygulaması
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Galeri";
app.appendChild(title);

const gallery = document.createElement("div");
gallery.className = "gallery";
app.appendChild(gallery);

const images = [
  { url: "https://picsum.photos/id/1/200/200", title: "Dağ manzarası", author: "Ayşe" },
  { url: "https://picsum.photos/id/2/200/200", title: "Şehir sokakları", author: "Mehmet" },
  { url: "https://picsum.photos/id/3/200/200", title: "Göl kıyısı", author: "Zeynep" }
];

async function fetchImages(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("HTTP " + response.status);
    }
    return await response.text();
  } catch (error) {
    console.log(error.message);
  }
}

Kendini test et

await ne işe yarar?
```
const response = await fetch(url);
```
- İsteği iptal eder
- Yanıtı önbelleğe alır
- Promise çözülene kadar bekletir
- Yanıtı dizeye çevirir
Cevabı göster

Promise çözülene kadar bekletir — Doğru! await, Promise çözülene kadar fonksiyonu bekletir.

response.ok denetimini tamamla

if (____) {
  throw new Error('HTTP ' + response.status);
}

Cevabı göster

if (!response.ok) {
  throw new Error('HTTP ' + response.status);
}

API kavramlarını eşleştir

async

Promise döndüren fonksiyon
await

Promise'i bekleten anahtar
fetch

Ağ isteği yapan fonksiyon
response.ok

Başarı durumu
throw

Hata fırlatma

Sıradaki ders: Galeri ızgarası oluşturma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler