JavaScript'in Fetch API'si, bir web sayfasından veri almak için kullanılan bir yöntemdir. Bu API, XMLHttpRequest ile aynı işlevi görür, ancak daha modern ve kullanımı daha kolaydır.
Fetch API, fetch() adlı bir fonksiyon sunar. Bu fonksiyon, verileri almak istediğiniz URL'yi argüman olarak alır ve döndürdüğü bir promis objesini geri döndürür. Bu promis, verileri alırken gerçekleşen bir hata veya başarı durumu hakkında bilgi içerir.
Örnek kullanım:
fetch('https://example.com/data.json')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});Bu kod, https://example.com/data.json adresinden verileri almaya çalışır. Başarı durumunda, veriler JSON formatında elde edilir ve console.log(data) ile yazdırılır. Hata durumunda ise, console.error('Error:', error) ile hata mesajı yazdırılır.
Fetch API, aynı zamanda verileri göndermek için de kullanılabilir. Örnek olarak, POST isteği göndermek için:
fetch('https://example.com/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Error:', error);
});Bu kod, https://example.com/submit adresine POST isteği gönderir ve gönderilen veriler key:value şeklindedir.
Fetch API, modern tarayıcılar tarafından desteklenir ve aynı zamanda polyfill kütüphaneleri ile eski tarayıcılarda da kullanılabilir.
Fetch API, sunucudan dönen verileri işlemek için birçok seçenek sunar. response.json(), response.text(), response.formData() gibi metodlar ile dönen verilerin farklı formatlarını elde edebilirsiniz. Ayrıca, response.ok ve response.status gibi özellikleri kullanarak sunucudan dönen HTTP durum kodunu kontrol edebilirsiniz.
Fetch API, ayrıca Request ve Headers objeleri aracılığıyla istekleri ve başlıkları daha detaylı olarak yapılandırabilirsiniz. Örnek olarak, bir GET isteği yaparken cache özelliğini kapatmak için:
const request = new Request('https://example.com/data.json', {
cache: 'no-cache'
});
fetch(request)
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});Fetch API, ayrıca await ve async anahtar kelimeleri ile kullanılabilir. Bu, verileri alırken gerçekleşen işlemleri daha okunaklı hale getirir ve kodunuzda asenkron işlemleri daha kolay yapmanıza olanak tanır. Örnek olarak:
async function getData() {
try {
const response = await fetch('https://example.com/data.json');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}Fetch API, günümüz web geliştirme işlemlerinde sıklıkla kullanılan ve verileri almak ve göndermek için oldukça kullanışlı bir yöntemdir. Bu API'nin kullanımının basitliği ve özellikleri ile, web uygulamalarınızda veri işlemlerini daha kolay ve etkili hale getirebilirsiniz.
