Web Geliştirmede JavaScript'te `fetch` API ile Modern Veri Çekme Rehberi 
Selam dostlar! Uzun zamandır forumda takılıyorum ve sıkça karşılaştığım bir konu üzerine, deneyimlerimi paylaşmak istedim. Eskiden `XMLHttpRequest` ile uğraşırken çektiğimiz sıkıntıları hatırlayan var mı? Neyse ki artık modern JavaScript bize `fetch` API'sini sunuyor. Bugün, bu güçlü aracı nasıl etkili bir şekilde kullanabileceğimizi, hatalarla nasıl başa çıkacağımızı ve pratik ipuçlarını konuşacağız. Hazırsanız başlayalım!
Neden `fetch`? Basit ve Güçlü!
`fetch`, ağ istekleri yapmak için kullanılan, Promise tabanlı modern bir API'dir. En büyük avantajı, kullanımının eski yöntemlere göre çok daha temiz ve anlaşılır olmasıdır. Doğrudan bir Promise döndürdüğü için, `then()` ve `catch()` bloklarıyla veya `async/await` ile rahatça kullanabiliriz.
Temel Bir `fetch` İsteği Nasıl Yapılır?
En basit haliyle, bir URL'ye GET isteği şöyle yapılır:
Burada neler oluyor, bir bakalım:
Sadece GET Değil: POST, PUT, DELETE
`fetch` sadece veri almak için değil, göndermek, güncellemek veya silmek için de kullanılır. Bunun için ikinci bir parametre olarak bir options nesnesi geçmemiz gerekir.
Hata Yönetimini Doğru Yapmak Çok Önemli!
Burada sık yapılan bir yanılgı var: `fetch`, sadece ağ hatası olduğunda (örn. internet kesintisi) Promise'i reddeder (reject). Sunucu 404 Not Found veya 500 Internal Server Error gibi bir HTTP hata kodu döndürse bile, `fetch` bunu başarılı bir istek (fulfilled Promise) olarak görür! Bu yüzden kontrolü bizim yapmamız gerekir.
`async/await` ile Daha Temiz Bir Kod
Eğer projenizde `async/await` kullanıyorsanız (ki şiddetle tavsiye ederim), `fetch` kodu çok daha okunabilir hale gelir.
Pratik İpuçları ve En İyi Uygulamalar
Umarım bu rehber, `fetch` API'sini kullanırken işinizi kolaylaştırır. Başlangıçta biraz karmaşık gelebilir, ancak birkaç kez kullandıktan sonra ne kadar esnek ve güçlü olduğunu göreceksiniz. Takıldığınız bir yer olursa yorumlarda sormaktan çekinmeyin, forum olarak yardımcı olmaya çalışırız. İyi kodlamalar!
Selam dostlar! Uzun zamandır forumda takılıyorum ve sıkça karşılaştığım bir konu üzerine, deneyimlerimi paylaşmak istedim. Eskiden `XMLHttpRequest` ile uğraşırken çektiğimiz sıkıntıları hatırlayan var mı? Neyse ki artık modern JavaScript bize `fetch` API'sini sunuyor. Bugün, bu güçlü aracı nasıl etkili bir şekilde kullanabileceğimizi, hatalarla nasıl başa çıkacağımızı ve pratik ipuçlarını konuşacağız. Hazırsanız başlayalım!
Neden `fetch`? Basit ve Güçlü!
`fetch`, ağ istekleri yapmak için kullanılan, Promise tabanlı modern bir API'dir. En büyük avantajı, kullanımının eski yöntemlere göre çok daha temiz ve anlaşılır olmasıdır. Doğrudan bir Promise döndürdüğü için, `then()` ve `catch()` bloklarıyla veya `async/await` ile rahatça kullanabiliriz.
Temel Bir `fetch` İsteği Nasıl Yapılır?
En basit haliyle, bir URL'ye GET isteği şöyle yapılır:
Kod:
fetch('https://api.ornek-sitem.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata oluştu:', error));Burada neler oluyor, bir bakalım:
- `fetch()` fonksiyonu, verilen URL'ye bir istek başlatır ve bir Promise döndürür.
- İlk `.then()` bloğunda, gelen ham yanıtı (`response`) işliyoruz. `response.json()` metodu, yanıt gövdesini (body) JSON formatında ayrıştırmak için yeni bir Promise döndürür.
- İkinci `.then()` bloğunda, artık kullanabileceğimiz JavaScript nesnesi haline gelen `data` ile istediğimizi yapabiliriz.
- `.catch()` bloğu ise, istek sırasında oluşabilecek herhangi bir ağ hatasını veya Promise reddini yakalar.
Sadece GET Değil: POST, PUT, DELETE
`fetch` sadece veri almak için değil, göndermek, güncellemek veya silmek için de kullanılır. Bunun için ikinci bir parametre olarak bir options nesnesi geçmemiz gerekir.
Kod:
// Yeni bir gönderi oluşturma (POST)
fetch('https://api.ornek-sitem.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'Yeni Başlık',
content: 'Buraya içerik gelecek...'
})
})
.then(response => response.json())
.then(data => console.log('Başarılı:', data));- method: İsteğin HTTP metodunu belirtir ('GET', 'POST', 'PUT', 'DELETE' vb.).
- headers: İstekle birlikte gönderilecek başlıkları tanımlar. JSON verisi gönderirken `'Content-Type': 'application/json'` belirtmek çok önemlidir.
- body: Göndermek istediğimiz veriyi buraya koyarız. Genellikle `JSON.stringify()` ile string'e çeviririz.
Hata Yönetimini Doğru Yapmak Çok Önemli!
Burada sık yapılan bir yanılgı var: `fetch`, sadece ağ hatası olduğunda (örn. internet kesintisi) Promise'i reddeder (reject). Sunucu 404 Not Found veya 500 Internal Server Error gibi bir HTTP hata kodu döndürse bile, `fetch` bunu başarılı bir istek (fulfilled Promise) olarak görür! Bu yüzden kontrolü bizim yapmamız gerekir.
Kod:
fetch('https://api.ornek-sitem.com/olmayan-bir-sayfa')
.then(response => {
// HTTP durum kodunu kontrol et
if (!response.ok) { // response.ok, 200-299 arasındaki kodlar için true'dur.
throw new Error(`HTTP hatası! Durum: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
// Burada hem ağ hataları, hem de bizim attığımız HTTP hataları yakalanır.
console.error('İstek başarısız:', error);
});`async/await` ile Daha Temiz Bir Kod
Eğer projenizde `async/await` kullanıyorsanız (ki şiddetle tavsiye ederim), `fetch` kodu çok daha okunabilir hale gelir.
Kod:
async function getPostData(postId) {
try {
const response = await fetch(`https://api.ornek-sitem.com/posts/${postId}`);
if (!response.ok) {
throw new Error(`Gönderi alınamadı. Durum: ${response.status}`);
}
const post = await response.json();
console.log(post);
return post;
} catch (error) {
console.error('Veri çekilirken hata:', error);
// Kullanıcıya hata mesajı gösterebilirsiniz.
}
}
// Fonksiyonu kullanma
getPostData(42);Pratik İpuçları ve En İyi Uygulamalar
- İstekleri Merkezileştirin: Tüm `fetch` çağrılarınızı tek bir yerde (örneğin bir `api.js` dosyasında) toplamak, hata yönetimi, header ekleme veya base URL değiştirme gibi işlemleri kolaylaştırır.
- Zaman Aşımı (Timeout) Ekleyin: `fetch`'in yerleşik bir timeout özelliği yoktur. Bunu `Promise.race()` veya `AbortController` API'si ile kendiniz eklemelisiniz.
- Güvenlik: API anahtarlarınızı asla frontend kodunda sabit (hardcode) olarak yazmayın. Bunun için backend'de bir proxy endpoint'i oluşturmak veya uygun sunucu taraflı çözümler kullanmak daha güvenlidir.
- Loading Durumunu Gösterin: İstek devam ederken kullanıcı arayüzünde bir yükleniyor (loading) göstergesi mutlaka bulunsun. Kullanıcı deneyimi için kritiktir.
Umarım bu rehber, `fetch` API'sini kullanırken işinizi kolaylaştırır. Başlangıçta biraz karmaşık gelebilir, ancak birkaç kez kullandıktan sonra ne kadar esnek ve güçlü olduğunu göreceksiniz. Takıldığınız bir yer olursa yorumlarda sormaktan çekinmeyin, forum olarak yardımcı olmaya çalışırız. İyi kodlamalar!