Javascript Fetch API Kullanımı

Javascript Fetch API, web tarayıcılarındaki HTTP isteklerini yönetmek için kullanılan modern bir API’dır. Bu API, veri alışverişi yapmak için kullanılır ve genellikle AJAX çağrıları, API istekleri ve diğer ağ işlemleri için tercih edilir.

Temel Fetch Kullanımı

Fetch API kullanarak basit bir GET Request yapalım:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

Bu kod örneği, “jsonplaceholder” adlı bir API’dan todos listesinin ilk öğesini çeker. fetch fonksiyonu asenkron bir şekilde çalışır ve bir Promise döndürür. Ardından, then ve catch metotları ile işlemler devam eder.

Veri Gönderme(POST)

Fetch API’yi kullanarak bir POST Request yapmak için:

const postData = {
  userId: 1,
  title: 'Yeni Gönderi',
  body: 'Bu bir örnek gönderidir.'
};

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData)
})
  .then(response => response.json())
  .then(data => console.log('Yeni Gönderi:', data))
  .catch(error => console.error('Hata:', error));

Bu örnek, JSON formatında veri gönderen basit bir POST isteği yapar. method, headers ve body parametreleri kullanılarak istek özelleştirilir.

Fetch API’nin bu basit kullanımları ile web uygulamalarında veri alışverişi kolaylaşır ve daha etkili hale gelir.

Bu blog yazısında, JavaScript Fetch API’nin temel kullanımlarını gördük. Daha fazla bilgi için MDN Fetch API Dokümantasyonunu inceleyebilirsiniz.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir