JavaScript Fetch API ve async/await ile Veri Çekme

Web Geliştirme üzerinde çalışırken JavaScript Fetch API ve async/await ile Veri Çekme konusunu doğru kavramak hem zaman kazandırır hem de ileride çıkabilecek sorunların önüne geçer. Aşağıda konunun özünü 4 başlık altında topladık.

Temel kavram ve amaç

Konunun özünde şu başlıklar yer alıyor: Promise tabanlı, HTTP hataları, JSON çözümleme ve Hata yakalama. Bu başlıkları ayrı ayrı ele almak, her parçanın hangi sorunu çözdüğünü görmeyi kolaylaştırır.

Öne çıkan noktalar

• Promise tabanlı: fetch bir Promise döndürür; await ile kod yukarıdan aşağıya okunur.
• HTTP hataları: fetch yalnızca ağ hatasında reddeder; 404 veya 500 için yanit.ok denetlenmelidir.
• JSON çözümleme: yanit.json() da bir Promise döndürür ve beklenmelidir.
• Hata yakalama: try/catch veya .catch ile ağ ve çözümleme hataları kullanıcıya anlaşılır biçimde gösterilir.

JavaScript ile uygulama

Teoriyi somutlaştırmak için kısa bir JavaScript örneğine bakalım:

async function urunleriGetir() {
  const yanit = await fetch('/api/urunler', { headers: { Accept: 'application/json' } });
  if (!yanit.ok) throw new Error('Sunucu hatası: ' + yanit.status);
  return yanit.json();
}

urunleriGetir()
  .then((urunler) => console.log(urunler.length + ' ürün yüklendi'))
  .catch((hata) => console.error(hata));

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Avantajları

Bu yaklaşımı benimsediğinizde elde edeceğiniz başlıca faydalar:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Son söz

JavaScript Fetch API ve async/await ile Veri Çekme konusunda ele aldığımız 4 nokta, günlük çalışmada en sık ihtiyaç duyulan kısmı kapsıyor. Özellikle Promise tabanlı ve Hata yakalama başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• PHP ile Güvenli Oturum Yönetimi: 7 Altın Kural
• Tailwind CSS ile Titreşimsiz Dark Mode

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.