crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Fetch API Nedir?
Fetch API, tarayıcı üzerinden ağ istekleri (HTTP requests) yapmamızı sağlayan modern bir arayüzdür. Eskiden kullanılan karmaşık XMLHttpRequest (AJAX) yapısının yerini alan, Promise tabanlı, daha temiz ve okunabilir bir yöntemdir.
2. Temel Fetch Kullanımı (GET İsteği)
Bir API'den veri çekmek için en basit haliyle fetch() fonksiyonuna adresi (URL) vermemiz yeterlidir. Ancak unutmayın: Fetch bir Promise döner, bu yüzden verinin gelmesini beklememiz gerekir.
JavaScript:
// Bir test API'sinden kullanıcı verilerini çekelim
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => {
// Gelen yanıtın başarılı olup olmadığını kontrol edelim
if (!response.ok) {
throw new Error("Ağ hatası oluştu!");
}
return response.json(); // Yanıtı JSON formatına çevir
})
.then(data => {
console.log("Kullanıcı Adı:", data.name);
console.log("E-posta:", data.email);
})
.catch(error => {
console.error("Hata yakalandı:", error);
});3. Modern Yöntem: Async / Await
.then() zincirleri yerine, modern JavaScript'te kodun daha senkron görünmesini sağlayan async/await yapısını kullanmak çok daha profesyonel bir yaklaşımdır.
JavaScript:
async function veriGetir() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
if (!response.ok) throw new Error("Veri alınamadı");
const posts = await response.json();
// İlk 5 postu ekrana yazdıralım
posts.slice(0, 5).forEach(post => {
console.log(`Başlık: ${post.title}`);
});
} catch (error) {
console.log("Hata:", error.message);
}
}
veriGetir();4. Sunucuya Veri Göndermek (POST İsteği)
Fetch sadece veri çekmek için değil, veri göndermek (örneğin bir form kaydı) için de kullanılır. Bunun için fetch fonksiyonuna ikinci bir parametre (options) eklememiz gerekir.
JavaScript:
const yeniPost = {
title: 'JavaScript Rehberi',
body: 'Fetch API öğreniyoruz!',
userId: 1
};
async function postGonder() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // İstek tipi
body: JSON.stringify(yeniPost), // Veriyi metne çevirip gönderiyoruz
headers: {
'Content-type': 'application/json; charset=UTF-8', // Veri tipini sunucuya bildiriyoruz
},
});
const data = await response.json();
console.log("Sunucudan gelen yanıt:", data);
}
postGonder();5. Fetch API Kullanırken Dikkat Edilmesi Gerekenler
[]Hata Yakalama: Fetch, 404 veya 500 gibi HTTP hatalarında "reject" olmaz. Yani .catch() bloğuna düşmez. Bu yüzden her zaman response.ok kontrolü yapmalısınız.
[]CORS Politikası: Başka bir domainden veri çekerken tarayıcının güvenlik engeline (CORS) takılabilirsiniz. Sunucunun bu isteğe izin vermesi gerekir.- JSON Dönüşümü: Gelen yanıt ham bir HTTP yanıtıdır. Veriyi kullanabilmek için mutlaka .json() metodunu await ederek çağırmalısınız.
Pratik Uygulama: Forum İçin Döviz Kuru Göstergesi
JavaScript:
async function dovizKuruAl() {
const container = document.querySelector("#doviz-alani");
try {
const response = await fetch('[https://api.exchangerate-api.com/v4/latest/USD](https://api.exchangerate-api.com/v4/latest/USD)');
const data = await response.json();
const tryKuru = data.rates.TRY;
container.innerHTML = `1 Dolar şu an: <b>${tryKuru} TL</b>`;
} catch (err) {
container.innerText = "Kurlar şu an yüklenemiyor.";
}
}
dovizKuruAl();Sonuç
Fetch API, modern web geliştirmenin en güçlü araçlarından biridir. Dış kaynaklarla iletişim kurmanızı sağlayarak uygulamanızı gerçek zamanlı verilerle besler. async/await yapısıyla birleştiğinde, karmaşık veri çekme işlemleri bile çocuk oyuncağına dönüşür.