Javascript fetch kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #fetch #api

Javascript Fetch, Web sayfası üzerinde HTTP istekleri gönderip yanıt almasını sağlayan bir API ‘dir.  XMLHttpRequest(XHR) ve Jquery ajax() 'a  alternetif bir kullanım türüdür zamanlada bu kullanımların yerini almaya başlamıştır. Web sayfası üzerinde asenkron bir şekilde istekler gönderip yanıtlarını alabilmekteyiz. 

Fetch kullanırken ilk olarak bir url belirtmemiz gerekmektedir. Belirtilen URL 'e istek göndermek için ise fetch() fonksiyonunu kullanabilirsiniz. fetch() fonksiyonu bizlere Promise bir değer döndürecektir.

fetch('https://example.com/example.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Yukarıdaki örnek de 'https://example.com/example.json' adresine bir istek göndermekteyiz. Bu isteğin yanıtı ile ilk Promise zincirinin ilk then() yönetimi dönen yanıtı json formatına dönüştürmektedir. İkinci then() yönetimi ise json formatına dönüştürülen veriyi konsola yazdırmaktadır. catch() yönetimi ise olası bir hata durumunu yakalamakta ve konsola yazdırmaktadır. 

İsteğin yanıtı then() içerisinde belirli formata dönüştürebiliriz. Bu format sadece json ile sınırılı olmamaktadır. 

• response.text()  - Yanıtı bir metin türüne dönüştürür
• response.json()  - Yanıtı Json nesnesine dönüştürür
• response.blob()  - Yanıtı Binary Large Object(BLOB) verisine dönüştürür
• response.formData()  - Yanıtı bir formData nesnesine dönüştürür 

fetch() fonksiyonu ile gönderdiğimi isteklerin türünü, istek içerisinde veri gönderme işlemi, İstek başlıkları gibi bir çok özellik ekleyebilmekteyiz.

const options = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'ahmet', password: 'cokguclubirsifre' })
};

fetch('https://example.com/user', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Yukarıdaki örnek de ise POST isteği gönderilmiştir. 

• method özelliği ile isteğinizin türünü belirleyebilmektesiniz. 
• headers özelliği ile istek de gönderilen verinin türünü belirleyebilmekteyiz. Bu kullanım sunucu ve istek adresinizin yapılandırmasına göre optimize etmeniz gerekebilmektedir. 
• body özelliği ile ise istek içerisinde karşı tarafa veri gönderebilmekteyiz.

Fetch kullanımı Cors desteği sağlamaktadır. Farklı alan adlarına ait web siteleri üzerinden veri alışverişine olanak sağlamaktadır.