Javascript İle Fetch Api Kullanarak Veri Çekme Nasıl Yapılır?

JavaScript ile Fetch API Kullanarak Veri Çekme Nasıl Yapılır?

Modern web geliştirme süreçlerinde, bir sunucudan veri almak ve bu veriyi kullanıcıya göstermek temel bir ihtiyaçtır. JavaScript ile Fetch API kullanarak veri çekme işlemi, günümüzde bu ihtiyacı karşılayan en standart, temiz ve güçlü yöntemdir. Bu rehberde, Fetch API'nin temel yapısından başlayarak, karmaşık veri yönetimi ve hata ayıklama süreçlerine kadar her adımı detaylandıracağız.

Bu makale, JavaScript temellerine hakim olan ancak asenkron programlama ve HTTP istekleri konusunda pratik yapmak isteyen geliştiriciler için hazırlanmıştır. Fetch API'nin sunduğu modern sözdizimi sayesinde, eski XMLHttpRequest yöntemlerine kıyasla çok daha okunabilir ve yönetilebilir kodlar yazmayı öğreneceksiniz.

Ön Hazırlık ve Gereksinimler

Fetch API ile çalışmaya başlamak için herhangi bir kütüphane kurulumuna ihtiyacınız yoktur. Fetch, tüm modern web tarayıcılarında yerleşik (native) olarak gelir. Çalışma ortamınız için şu araçların hazır olması yeterlidir:

• Güncel bir web tarayıcısı (Chrome, Firefox, Edge veya Safari).
• Basit bir kod editörü (VS Code gibi).
• İstek atabileceğiniz bir API uç noktası (Test amaçlı JSONPlaceholder gibi ücretsiz servisler kullanılabilir).
• JavaScript'in temel asenkron yapıları (Promise ve Async/Await) hakkında genel bir bilgi.

Fetch API'nin Temel Yapısı ve İlk İstek

Fetch API, bir ağ isteği başlatmak için fetch() fonksiyonunu kullanır. Bu fonksiyon geriye bir "Promise" (gelecekte tamamlanacak bir değer) döndürür. Basit bir GET isteği yaparak sunucudan veri çekme işlemini başlatalım.

// Basit bir GET isteği örneği
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata oluştu:', error));

Yukarıdaki örnekte, fetch() fonksiyonu ile belirtilen URL'ye bir istek gönderdik. response.json() metodu, gelen ham veriyi JavaScript nesnesine dönüştürür. catch bloğu ise ağ hatası veya sunucu bağlantı sorunlarını yakalamak için kullanılır.

Async/Await ile Daha Okunabilir Kod Yazımı

2026 yılı standartlarında, asenkron işlemleri yönetmek için async/await sözdizimi en çok tercih edilen yöntemdir. Bu yöntem, kodun sanki senkron (sıralı) çalışıyormuş gibi görünmesini sağlar ve hata yönetimini kolaylaştırır.

// Async/Await ile veri çekme
async function veriGetir() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('Sunucu hatası: ' + response.status);
    }
    const veri = await response.json();
    console.log('Gelen Veri:', veri);
  } catch (hata) {
    console.error('İşlem başarısız:', hata);
  }
}

veriGetir();

Burada response.ok kontrolü kritiktir. Fetch API, HTTP hata kodlarında (404 veya 500 gibi) otomatik olarak "reject" durumuna düşmez. Bu nedenle, isteğin başarılı olup olmadığını manuel olarak kontrol etmek bir güvenlik ve doğruluk standardıdır.

POST İsteği ile Sunucuya Veri Gönderme

Fetch API sadece veri çekmek için değil, sunucuya veri göndermek için de kullanılır. POST isteği yaparken, isteğin gövdesini (body) ve içeriğin tipini (headers) belirtmeniz gerekir.

// POST isteği ile veri gönderme
async function veriGonder() {
  const yeniPost = { title: 'Yeni Başlık', body: 'İçerik metni', userId: 1 };
  
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(yeniPost)
  });
  
  const sonuc = await response.json();
  console.log('Sunucudan gelen yanıt:', sonuc);
}

JSON.stringify() metodu, JavaScript nesnesini JSON formatındaki bir metne dönüştürür. Sunucunun veriyi doğru işlemesi için Content-Type başlığının application/json olarak ayarlanması zorunludur.

Fetch API Kullanım Yöntemleri Karşılaştırması

Hata Yönetimi ve Güvenlik Uyarıları

Dikkat: Fetch API kullanırken kullanıcıdan alınan verileri doğrudan DOM'a eklemeyin. Bu, XSS (Cross-Site Scripting) saldırılarına kapı aralar. Verileri her zaman temizleyin (sanitize) veya textContent gibi güvenli yöntemler kullanın. Ayrıca, hassas API anahtarlarını asla doğrudan istemci tarafındaki kodunuzda açık bir şekilde paylaşmayın.

Bir hata yakalama stratejisi oluştururken, ağ hataları ile HTTP hatalarını birbirinden ayırmalısınız. Ağ hataları (internet kesilmesi vb.) catch bloğuna düşerken, HTTP hataları (404, 403) response.ok kontrolü ile yakalanır.

// Gelişmiş hata yönetimi
async function veriCekGuvenli() {
  try {
    const response = await fetch('https://api.ornek.com/data');
    if (!response.ok) throw new Error(`HTTP Hata: ${response.status}`);
    return await response.json();
  } catch (hata) {
    // Kullanıcıya hata mesajını göster
    console.error('Uygulama hatası:', hata.message);
  }
}

Sıkça Sorulan Sorular

Fetch API neden XMLHttpRequest'ten daha iyidir?

Fetch API, Promise tabanlı yapısı sayesinde daha temiz bir kod yazımı sunar ve asenkron işlemleri yönetmeyi kolaylaştırır. XMLHttpRequest ise çok daha karmaşık ve eski bir sözdizimine sahiptir.

Fetch API'de zaman aşımı (timeout) nasıl eklenir?

Fetch API'nin kendi zaman aşımı parametresi yoktur. Ancak AbortController kullanarak belirli bir süre sonra isteği iptal edebilirsiniz.

Fetch ile gelen veriyi nasıl HTML'e basarım?

document.createElement veya innerHTML kullanarak veriyi DOM'a ekleyebilirsiniz. Ancak, XSS riskine karşı kullanıcıdan gelen verileri textContent özelliğine atamanız önerilir.

Aynı anda birden fazla istek nasıl atılır?

Promise.all() metodunu kullanarak birden fazla fetch isteğini paralel olarak başlatabilir ve tümü tamamlandığında sonuçları alabilirsiniz.

Fetch API tüm tarayıcılarda çalışır mı?

Modern tüm tarayıcılarda çalışır. Çok eski tarayıcılar (örneğin Internet Explorer) için bir "polyfill" kütüphanesi eklemeniz gerekebilir.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim (production) ortamında kullanacağınız API isteklerinde CORS politikalarına, veri doğrulama süreçlerine ve sunucu tarafı güvenlik önlemlerine mutlaka dikkat ediniz.

Fetch API ile İleri Seviye İstek İptali (AbortController)

Modern web uygulamalarında, kullanıcı bir sayfadan ayrıldığında veya bir arama kutusuna hızlıca yazı yazarken devam eden ağ isteklerini iptal etmek performans ve kaynak yönetimi açısından kritiktir. Fetch API, AbortController arayüzü ile bu işlemi standart bir şekilde yapmamıza olanak tanır.

Aşağıdaki örnekte, uzun süren bir isteği nasıl manuel olarak iptal edebileceğinizi görebilirsiniz:

const controller = new AbortController();
const signal = controller.signal;

async function fetchWithTimeout() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', { signal });
    const data = await response.json();
    console.log(data);
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('İstek kullanıcı tarafından iptal edildi.');
    } else {
      console.error('Bir hata oluştu:', err);
    }
  }
}

// İsteği başlat
fetchWithTimeout();

// 2 saniye sonra isteği iptal et
setTimeout(() => controller.abort(), 2000);

Fetch İsteklerinde Performans Optimizasyonu

Veri çekme süreçlerinde performans, sadece hızla ilgili değildir; aynı zamanda sunucu yükünü azaltmak ve tarayıcı kaynaklarını verimli kullanmakla ilgilidir. İşte Fetch API performansını artırmak için dikkat etmeniz gereken temel stratejiler:

1. İstekleri Önbelleğe Alma (Caching)

Her seferinde aynı veriyi sunucudan çekmek yerine, tarayıcının yerel önbelleğini kullanabilirsiniz. cache parametresi ile isteğin nasıl yönetileceğini belirleyebilirsiniz:

fetch('https://api.ornek.com/data', {
  method: 'GET',
  cache: 'force-cache' // Tarayıcı önbelleğini zorla kullan
});

2. Gereksiz Veri Transferini Engelleme

API'niz destekliyorsa, sadece ihtiyacınız olan alanları çekmek için sorgu parametrelerini (query parameters) kullanın. Örneğin, /users?fields=id,name gibi bir yapı, JSON boyutunu ciddi oranda düşürerek ağ trafiğini optimize eder.

3. İsteklerin Sıralanması ve Önceliklendirilmesi

Aynı anda çok fazla istek atılması tarayıcının eş zamanlı bağlantı sınırına takılmasına neden olabilir. Kritik verileri önce, ikincil verileri (örneğin footer içerikleri) daha sonra çekmek için Promise.all yerine sıralı await kullanabilirsiniz.

Bu teknikleri uygulayarak, Fetch API üzerinden yaptığınız ağ trafiğini daha yönetilebilir ve kullanıcı dostu hale getirebilirsiniz. Özellikle mobil cihazlarda kısıtlı internet bağlantısı olan kullanıcılar için bu optimizasyonlar, uygulamanızın kalitesini doğrudan etkileyecektir.

Sonuç

JavaScript ile Fetch API kullanarak veri çekme, modern web dünyasının en temel yeteneklerinden biridir. Bu rehberde öğrendiğiniz async/await yapısı, hata yönetimi ve istek tipleri, profesyonel projeleriniz için sağlam bir temel oluşturacaktır. Bir sonraki adım olarak, Axios gibi daha gelişmiş kütüphaneleri inceleyebilir veya kendi küçük projenizde bir API'den veri çekerek dinamik bir kullanıcı arayüzü oluşturmayı deneyebilirsiniz.