Emre

Emre

WFN Üye
Konular
1,714
Mesajlar
1,810
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 5 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
API isteği yapmak için async bir fonksiyon içinde fetch() çağırın, yanıtı await ile bekleyin ve HTTP durumunu kontrol ettikten sonra JSON verisini okuyun. try...catch ile ağ ve veri işleme hatalarını yakalayabilirsiniz. Aşağıdaki yerel örnek, aynı yöntemi gerçek bir API adresine uyarlamanızı sağlar.

Çalışan bir GET isteği oluşturun​

fetch(), sonucu daha sonra belli olan bir Promise döndürür. await, çevresindeki asenkron fonksiyonun devamını sonuç gelene kadar bekletir; bu sırada JavaScript'in diğer işleri çalışabilir.

Örneği denemek için bir klasöre products.json adlı dosyayı oluşturup şu örnek veriyi kaydedin:

JSON: 
[{"id": 1, "name": "Klavye"}]

Aynı klasörde index.html dosyasını oluşturun ve kaydedin:

HTML: 
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>API isteği örneği</title>
</head>
<body>
  <p>Sonucu tarayıcı konsolunda görüntüleyin.</p>
  <script>
    async function urunleriGetir() {
      try {
        const yanit = await fetch('./products.json');

        if (!yanit.ok) {
          throw new Error(`HTTP hatası: ${yanit.status}`);
        }

        const urunler = await yanit.json();
        console.log('İlk ürün:', urunler[0].name);
      } catch (hata) {
        console.error('Ürünler alınamadı:', hata.message);
      }
    }

    urunleriGetir();
  </script>
</body>
</html>

Klasörde bir terminal açın ve Python 3 yüklüyse python -m http.server 8000 komutunu çalıştırın; bazı sistemlerde python3 komutu gerekir. Tarayıcıda localhost:8000 adresini açın ve geliştirici araçlarının konsoluna bakın. Dosyalar doğru kaydedildiyse İlk ürün: Klavye çıktısını görürsünüz. İşiniz bitince terminalde Ctrl+C ile sunucuyu durdurabilirsiniz.

Gerçek bir API kullanırken fetch() içindeki yolu, servisin belgelerinde verilen uç nokta adresiyle değiştirin. Örnekteki urunler[0].name erişimi yalnız gösterilen veri yapısına uygundur; kendi API yanıtınızın alanlarına göre değiştirmeniz gerekir. Erişim anahtarı gerekiyorsa servisin kimlik doğrulama yönergelerini izleyin; gizli anahtarları tarayıcıya gönderilen JavaScript koduna yerleştirmeyin.

Yanıtı ve hataları yorumlayın​

fetch() bir HTTP yanıtı aldığında, yanıt 404 veya 500 olsa bile normal olarak tamamlanır. Bu yüzden örnek, yanit.ok değerini kontrol edip başarısız HTTP durumunda hata oluşturur. Başarılı durum kodu ise tek başına verinin beklediğiniz yapıda olduğunu kanıtlamaz.

yanit.json(), yanıt gövdesini okuyup JSON olarak çözer ve o da beklenmesi gereken bir Promise döndürür. Yanıt boşsa veya geçerli JSON değilse hata oluşabilir. Kullandığınız uç noktanın JSON döndürdüğünü ve varsa yanıt alanlarının adlarını belgelerinden doğrulayın; boş yanıt beklenen bir işlemde doğrudan json() çağırmayın.

Konsolda HTTP hatası görürseniz durum kodunu, istek adresini ve API'nin istediği kimlik doğrulama bilgilerini kontrol edin. Ağ hatasında bağlantıyı ve adresi inceleyin. Tarayıcı konsolunda CORS hatası varsa sunucunun sayfanızın kaynağına erişim izni verip vermediğini kontrol edin; sunucu size ait değilse sağlayıcıdan bu izni isteyin. no-cors seçeneği okunabilir bir API yanıtı sağlamaz.

Tanılama sırasında geliştirici araçlarının ağ panelinden istek yöntemini ve durum kodunu inceleyebilirsiniz. Anahtarları, oturum bilgilerini veya hassas yanıtları konsola yazdırmayın ya da paylaşmayın; geçici tanılama çıktılarını işiniz bitince kaldırın.

POST ile veri gönderin​

Bir API yeni kayıt oluşturmak için JSON kabul ediyorsa, adres ve alanları kendi belgelerine göre uyarlayarak şu fonksiyonu kullanabilirsiniz. Bu örnek, başarılı yanıtın JSON içerdiğini varsayar:

JavaScript: 
async function urunEkle(apiAdresi, urun) {
  const yanit = await fetch(apiAdresi, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(urun)
  });

  if (!yanit.ok) {
    throw new Error(`HTTP hatası: ${yanit.status}`);
  }

  return await yanit.json();
}

async function kaydet() {
  try {
    const sonuc = await urunEkle('/api/products', { name: 'Klavye' });
    console.log('API yanıtı:', sonuc);
  } catch (hata) {
    console.error('Kayıt isteği başarısız:', hata.message);
  }
}

kaydet();

Buradaki /api/products örnek bir yoldur; gerçek sunucunuzda karşılığı yoksa çalışmaz. JSON.stringify() nesneyi gönderilecek JSON metnine çevirir. Başarılı yanıtın içeriğini API'nin tanımına göre yorumlayın; örneğin sunucu boş gövde döndürüyorsa son json() çağrısını buna göre değiştirin. Bir ağ hatası, sunucunun kaydı hiç oluşturmadığını kesin olarak göstermez; aynı isteği yeniden göndermeden önce API'den kaydın durumunu kontrol edin.
 
Moderatör tarafında düzenlendi:

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)