Emre

Emre

WFN Üye
Konular
1,662
Mesajlar
1,758
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 4 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
JavaScript’te bir API’den veri çekmek için genellikle fetch() kullanılır. İstek gönderilir, yanıtın başarılı olup olmadığı kontrol edilir, gövde json() ile JavaScript nesnesine dönüştürülür ve elde edilen veri ekranda kullanılır. Aşağıdaki örnekte varsayımsal bir API adresinden kullanıcı listesi alınarak sayfaya yazdırılıyor.

JavaScript: 
async function kullanicilariGetir() {
  try {
    const yanit = await fetch('https://api.example.com/users');

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

    const kullanicilar = await yanit.json();

    console.log(kullanicilar);
  } catch (hata) {
    console.error('Veri alınamadı:', hata.message);
  }
}

kullanicilariGetir();

Burada fetch() API adresine HTTP isteği gönderir. await isteğin tamamlanmasını bekler; yanit.ok değeri isteğin HTTP açısından başarılı olup olmadığını gösterir. Ardından yanit.json(), yanıt gövdesindeki JSON metnini JavaScript nesnesine veya dizisine dönüştürür. try...catch bloğu ise ağ hatası veya kod içinde fırlatılan hata olduğunda işlemi yakalar.

API yanıtını sayfada kullanma​


Sadece console.log() ile veriyi görmek yerine, sonucu HTML içeriğine aktarabilirsiniz. Örneğin sayfada kullanicilar kimliğine sahip bir alan bulunduğunu varsayalım:

HTML: 
<ul id="kullanicilar"></ul>
<script src="app.js" defer></script>

JavaScript dosyasında veriyi aldıktan sonra her kullanıcı için bir liste öğesi oluşturabilirsiniz:

JavaScript: 
async function kullanicilariGoster() {
  const liste = document.querySelector('#kullanicilar');

  try {
    const yanit = await fetch('https://api.example.com/users');

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

    const kullanicilar = await yanit.json();

    liste.replaceChildren();

    for (const kullanici of kullanicilar) {
      const oge = document.createElement('li');
      oge.textContent = `${kullanici.name} - ${kullanici.email}`;
      liste.appendChild(oge);
    }
  } catch (hata) {
    liste.textContent = 'Kullanıcılar yüklenemedi.';
    console.error(hata);
  }
}

kullanicilariGoster();

Bu örnekte API yanıtının dizi olduğu ve her öğede name ile email alanlarının bulunduğu varsayılmıştır. Gerçek API farklı alan adları veya iç içe bir yapı döndürüyorsa, önce console.log(kullanicilar) ile yanıtı inceleyip kodu gerçek yapıya göre değiştirmelisiniz. İstek başarılı olsa bile beklenen alanlar yoksa ekranda undefined görülebilir; bu durum bağlantının çalışmadığını değil, kod ile API yanıtının birbiriyle uyuşmadığını gösterir.

İsteğin sonucunu doğru yorumlama​


fetch() yalnızca ağ isteği tamamen başarısız olduğunda doğrudan hata verir. Örneğin sunucu 404 veya 500 yanıtı döndürürse Promise çoğu durumda reddedilmez; bu nedenle yanit.ok kontrolü ayrıca yapılmalıdır.
DurumNe anlama gelir?Sonraki işlem
200–299HTTP isteği başarılıdır; yanıt gövdesi kullanılabilir olabilir.Yanıt biçimini kontrol edip json() veya uygun başka bir yöntemle okuyun.
400–499İstek biçimi, adresi veya yetkilendirmesiyle ilgili sorun olabilir.Gönderilen parametreleri, kimlik doğrulama bilgisini ve API dokümantasyonunu kontrol edin.
500–599Sunucu isteği işlerken hata vermiştir.Yanıt gövdesindeki hata bilgisini inceleyin; istemci kodunu değiştirmeden önce sunucu durumunu doğrulayın.
catch bloğuAğ bağlantısı, yanlış adres, CORS veya çalışma zamanı kaynaklı hata olabilir.Tarayıcı geliştirici araçlarındaki Console ve Network bölümlerinde isteği inceleyin.
HTTP durum kodunun başarılı olması, verinin uygulamanızın beklediği anlamı taşıdığını tek başına kanıtlamaz. Örneğin API 200 döndürüp boş bir dizi gönderebilir veya bir hata mesajını JSON olarak iletebilir. Bu nedenle yanıtı aldıktan sonra dizinin boş olup olmadığını ve gerekli alanların gerçekten bulunup bulunmadığını da kontrol etmek gerekir.

POST isteğiyle veri gönderme​


API’den veri okumak için çoğunlukla varsayılan GET yöntemi yeterlidir. Sunucuya veri göndermeniz gerekiyorsa method, headers ve body seçeneklerini belirtirsiniz. Aşağıdaki örnekte varsayımsal bir kullanıcı oluşturma isteği gönderilmektedir:

JavaScript: 
async function kullaniciOlustur() {
  const yeniKullanici = {
    name: 'Ayşe',
    email: '[email protected]'
  };

  try {
    const yanit = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(yeniKullanici)
    });

    if (!yanit.ok) {
      throw new Error(`Kullanıcı oluşturulamadı: ${yanit.status}`);
    }

    const sonuc = await yanit.json();
    console.log('Sunucunun yanıtı:', sonuc);
  } catch (hata) {
    console.error(hata.message);
  }
}

kullaniciOlustur();

JSON.stringify() JavaScript nesnesini istek gövdesine gönderilebilecek JSON metnine çevirir. Content-Type başlığı sunucuya gövdenin JSON biçiminde olduğunu bildirir. Sunucunun kabul ettiği alan adları, zorunlu değerler ve kimlik doğrulama yöntemi API’ye göre değişir; bu bilgileri ilgili API’nin dokümantasyonuna göre düzenlemelisiniz.

Çalışmıyorsa nereden kontrol edilmeli?​


İstek beklenmeyen bir sonuç verirse tarayıcının geliştirici araçlarında önce Network bölümünü açın. İstek adresinin doğru olup olmadığını, HTTP yöntemini, gönderilen başlıkları, durum kodunu ve yanıt gövdesini birlikte inceleyin. Console bölümündeki CORS mesajı, JavaScript kodunun bulunduğu alan adının API tarafından tarayıcı isteği için yetkilendirilmediğini gösterebilir. Bu durumda istemci tarafında rastgele bir başlık eklemek sorunu çözmez; API sunucusunun uygun CORS yanıt başlıklarını göndermesi veya isteğin sunucu tarafı bir ara katmandan yapılması gerekir.

Kimlik doğrulama anahtarı gerekiyorsa anahtarı tarayıcıda çalışan koda veya herkese açık bir depoya gömmeyin. Gizli anahtarlar sunucu tarafında tutulmalı; tarayıcı yalnızca uygulamanızın güvenli sunucusuyla konuşmalıdır. Tanılama amacıyla yanıtı konsola yazdırıyorsanız erişim belirteçlerini, kişisel verileri ve diğer gizli bilgileri paylaşmadığınızdan emin olun; hata ayıklama tamamlandığında geçici çıktıları kaldırın.

Kısaca doğru akış şöyledir: API adresine fetch() ile istek gönderin, yanit.ok ile HTTP sonucunu kontrol edin, yanıtı json() ile dönüştürün, beklenen veri yapısını doğrulayın ve ardından veriyi arayüze aktarın. Hata oluştuğunda yalnızca ekrandaki mesajı değil, Network kaydındaki adresi, yöntem bilgisini, durum kodunu ve yanıt gövdesini birlikte değerlendirin.
 

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)