Javascript ile fetch ve XMLHttpRequest

JavaScript ile API’den veri çekmek için öncelikle bir XMLHttpRequest (XHR) nesnesi oluşturmanız gerekmektedir. Bu nesne, bir web sayfası tarafından bir HTTP isteği göndermenizi ve yanıtı almanızı sağlayacaktır .

Örneğin, aşağıdaki kod bloğu, bir GET isteği göndererek, bir API’den bir dize döndüren bir veri çekme işlemini gösterir:

// Bir XHR nesnesi oluşturun
var xhr = new XMLHttpRequest();

// İstek tipini ve URL'yi belirtin
xhr.open('GET', 'https://api.example.com/endpoint');

// İsteği gönderin ve yanıtı işleyin
xhr.onload = function() {
  if (xhr.status === 200) {
    // Yanıt başarılı: veriyi işleyin
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
  else {
    // Yanıt başarısız: hata mesajı gösterin
    console.log('API hatası: ' + xhr.status);
  }
};
xhr.send();

Bu örnekte, XMLHttpRequest.open() metodu ile bir GET isteği ve API endpoint’i belirtilir. Daha sonra, XMLHttpRequest.onload olayı işleyicisi ile bir yanıt işlenir. Bu olay işleyicisi, yanıt başarılıysa veriyi işler ve başarısızsa bir hata mesajı gösterir. Son olarak, XMLHttpRequest.send() metodu ile istek gönderilir.

Dikkat edilmesi gereken bir nokta, bu örnekte veri JSON formatında döndürülmektedir. Bu yüzden, JSON.parse() metodu ile veri dizi veya nesne olarak işlenir.

Bu örnekteki gibi, JavaScript ile API’den veri çekmek için XHR nesnesini kullanabilirsiniz. Ancak, bu yöntem eskidir ve artık tavsiye edilmemektedir. Daha yeni ve kolay kullanımlı bir alternatif olarak, fetch() API’sini kullanabilirsiniz. Aşağıdaki kod bloğu, fetch() API’sini kullanarak aynı işlemi gerçekleştirir:

fetch('https://api.example.com/endpoint')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('API hatası: ' + error);
  });

Bu örnekte, fetch() işlevi ile bir GET isteği gönderilir ve döndürülen yanıtın bir Promise nesnesi döndürülür. Promise nesnesinin then() metodu ile yanıt işlenir. Eğer yanıt başarılıysa, response.json() metodu ile veri JSON olarak işlenir ve then() metodunun ikinci çağrısında veri işlenir. Eğer yanıt başarısız veya bir hata oluşursa, catch() metodu ile bir hata mesajı gösterilir.

Bu örnekte gösterildiği gibi, JavaScript ile API’den veri çekmek için fetch() API’sini kullanarak kolay ve modern bir yöntem sunmaktadır. Ancak, daha fazla özelleştirme için XMLHttpRequest nesnesini kullanmayı da düşünebilirsiniz. Ancak yukarıda anlatılanlara ek olarak biraz daha fetch konusunu anlamamız gerekiyor .

fetch(), bir URL ve opsiyonel olarak bir istek nesnesi alır ve bir Promise nesnesi döndürür. İstek nesnesi, isteğin detaylarını (örneğin, veri gönderme, başlıklar gibi) belirtmek için kullanılıcaktır. Örneğin, aşağıdaki kod bloğu, bir GET isteği göndererek, bir API’den bir dize döndüren bir veri çekme işlemini gösterecektir. Yukarıda verdiğimiz son örnek aslında bunu gayet güzel anlattığını düşünüyorum .

Aslında fetch() işlevi  yukarıda  bir GET isteği gönderiyor ve döndürülen yanıtın bir Promise nesnesi dönüştürüyor. Promise nesnesinin then() metodu ile yanıt işliyor ve  Eğer yanıt başarılı olarak alınırsa yani dönen 200 OK şeklindeyse, response.text() metodu ile veri dize olarak işlenir ve then() metodunun ikinci çağrısında veri işlenir. Eğer yanıt başarısız veya bir hata oluşursa, catch() metodu ile bir hata mesajı gösterebiliyoruz. ( hazır aklımıza gelmişken bunu da bir makale de inceleyelim 🙂 )

Dikkat edilmesi gereken bir nokta, fetch() API’sı bir Promise nesnesi döndürür. Bu yüzden, then() ve catch() metodları ile Promise üzerinde işlem yapılır. Bu metodlar, Promise çözüldüğünde veya hata oluştuğunda çağrılır.

Eğer daha fazla özelleştirme yapmak istersek, bir istek nesnesi de fetch() işlevine gönderebiliriz. Örneğin, aşağıdaki kod bloğuile bir POST isteği göndererek, bir API’ye veri gönderen bir işlemin cevabını alalım .

// İstek nesnesini oluşturun
var requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', age: 30 })
};

// İstek nesnesini gönderin ve yanıtı işleyin
fetch('https://api.example.com/endpoint', requestOptions)
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('API hatası: ' + error);
  });

yukarıdaki örnekte bir istek nesnesi oluşturulur ve fetch() işlevine gönderilir. Bu istek nesnesi, method özelliği ile POST isteği belirtir ve headers özelliği ile Content-Type başlığı gönderir. Ayrıca, body özelliği ile JSON formatında bir veri gönderir. Daha sonra, fetch() işlevi ile istek gönderilir ve yanıtın bir Promise nesnesi döndürülür. Promise nesnesinin then() ve catch() metodları ile yanıt işlenir ve veri işlenir veya bir hata mesajı gösterilir.

Bu örnekte gösterildiği gibi, JavaScript ile fetch() API’sini kullanarak bir API’ye istek gönderebilir ve yanıtı işleyebilirsiniz. Ancak, bu örnekteki gibi sadece bir POST isteği gönderilmiştir. fetch() API’sı ile diğer istek tiplerini de gönderebilirsiniz, örneğin GET, PUT, DELETE gibi.

Kullandığımız Kavramlar

• fetch(): JavaScript’te bir HTTP isteği göndermek ve yanıtı almak için kullanılan bir işlevdir. Bu işlev, bir URL ve opsiyonel olarak bir istek nesnesi alır ve bir Promise nesnesi döndürür.
• Promise: JavaScript’te bir işlemin sonucunu temsil eden bir nesnedir. Promise nesnesinin then() metodu ile başarılı bir sonuç işlenir ve catch() metodu ile hata işlenir.
• then(): Promise nesnesinin bir metodudur ve Promise çözüldüğünde çağrılır. Bu metodun bir argümanı olarak, çözülen Promise‘nin değeri alır.
• catch(): Promise nesnesinin bir metodudur ve Promise‘nin çözülme sırasında bir hata oluştuğunda çağrılır. Bu metodun bir argümanı olarak, oluşan hata alır.
• XMLHttpRequest: JavaScript’te bir HTTP isteği göndermek ve yanıtı almak için kullanılan bir nesnedir. Bu nesne, bir web sayfası tarafından bir HTTP isteği göndermenizi ve yanıtı almanızı sağlar.
• open(): XMLHttpRequest nesnesinin bir metodudur ve bir istek tipini ve URL’yi belirtir.
• send(): XMLHttpRequest nesnesinin bir metodudur ve isteği gönderir.
• onload: XMLHttpRequest nesnesinin bir olayıdır ve yanıt yüklendiğinde çağrılır.
• status: XMLHttpRequest nesnesinin bir özelliğidir ve yanıtın HTTP durum kodunu temsil eder.
• responseText: XMLHttpRequest nesnesinin bir özelliğidir ve yanıtın dize biçiminde verisini temsil eder.

Fetch API:

• Örnek: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

XMLHttpRequest:

• Örnek: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data