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

Gereksinimler ve Ön Hazırlık

Fetch API ile çalışmaya başlamak için herhangi bir kütüphane kurulumuna ihtiyacınız yoktur; çünkü bu API, modern tüm tarayıcılarda (Chrome, Firefox, Edge, Safari) yerleşik olarak bulunur. Ancak geliştirme ortamınızda şu araçların bulunması işinizi kolaylaştıracaktır:

• Modern bir kod editörü (VS Code gibi).
• Tarayıcı Geliştirici Araçları (F12 - Network sekmesi, istekleri incelemek için kritik öneme sahiptir).
• Test amaçlı kullanabileceğiniz ücretsiz bir API servisi (örneğin: JSONPlaceholder).
• Yerel bir geliştirme sunucusu (Live Server eklentisi gibi, çünkü bazı güvenlik protokolleri yerel dosyalarda 'CORS' hatasına neden olabilir).

Temel Fetch İstek Yapısı: Adım Adım Veri Çekme

Fetch API, bir URL'yi parametre olarak alır ve bir Promise döndürür. İlk adımda, basit bir GET isteği ile veriyi çekmeyi ve konsola yazdırmayı öğreneceğiz. Aşağıdaki kod, bir API'den kullanıcı verilerini almak için kullanılan en temel yapıdır.

// Temel bir GET isteği yapısı
fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json()) // Yanıtı JSON formatına dönüştür
  .then(data => console.log(data))   // Veriyi konsola yazdır
  .catch(error => console.error('Hata:', error)); // Hata oluşursa yakala

Burada fetch() fonksiyonu ağ isteğini başlatır. Ardından gelen .then() blokları, işlemin başarılı olması durumunda veriyi işlemek için kullanılır. response.json() metodu, gelen ham veriyi JavaScript nesnesine (object) dönüştürür.

Async/Await Sözdizimi ile Fetch Kullanımı

2026 standartlarında, kodun okunabilirliğini artırmak için async/await yapısını kullanmak en iyi pratiktir. Bu yöntem, asenkron kodlarınızı senkron (sıralı) bir şekilde yazmanıza olanak tanır. Aşağıdaki örnekte, aynı işlemi daha modern bir sözdizimi ile gerçekleştiriyoruz.

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

veriGetir();

Burada try-catch bloğu, ağ hatalarını veya dönüştürme hatalarını yakalamak için kullanılır. !response.ok kontrolü ise sunucudan 404 veya 500 gibi hata kodları dönüp dönmediğini doğrular.

Veri Çekme Yöntemlerinin Karşılaştırılması

Fetch API, geleneksel yöntemlere göre oldukça avantajlıdır. Aşağıdaki tablo, farklı yaklaşımların kısa bir özetini sunar.

POST İsteği ile Dış Kaynağa Veri Gönderme

Fetch API sadece veri çekmek için değil, aynı zamanda veri göndermek için de kullanılır. Bir form verisini sunucuya kaydetmek istediğinizde, isteğin metodunu ve içeriğini (body) belirtmeniz gerekir.

async function veriGonder() {
  const yeniVeri = { 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(yeniVeri)
  });

  const sonuc = await response.json();
  console.log('Sunucudan yanıt:', sonuc);
}

veriGonder();

Burada headers kısmında Content-Type belirterek, sunucuya JSON verisi gönderdiğimizi bildiriyoruz. JSON.stringify() metodu ise JavaScript nesnesini metin formatına çevirir.

Kritik Güvenlik Uyarısı: Dış kaynaktan gelen verileri doğrudan innerHTML kullanarak sayfaya basmayın. Bu, XSS (Cross-Site Scripting) saldırılarına kapı aralar. Verileri her zaman textContent veya innerText ile güvenli bir şekilde DOM'a ekleyin.

Hata Yönetimi ve Debug İpuçları

Fetch API kullanırken en sık yapılan hata, ağ hatalarını (network error) yakalayıp HTTP hatalarını (404, 500) göz ardı etmektir. Fetch, sunucu 404 dönse bile Promise'i "başarılı" (resolve) olarak kabul eder. Bu yüzden her zaman response.ok kontrolü yapmalısınız.

// Hatalı kullanım örneği
fetch('https://gecersiz-url.com')
  .then(res => res.json()) // 404 dönerse burası hata verir
  .catch(err => console.log(err));

// Doğru kullanım örneği
async function guvenliGetir(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP Hata: ${res.status}`);
  return await res.json();
}

Debug yaparken tarayıcınızın "Network" sekmesini sürekli açık tutun. İsteklerin "Status Code" değerlerini inceleyerek sunucunun ne yanıt verdiğini net bir şekilde görebilirsiniz.

Sıkça Sorulan Sorular

Fetch API neden bazen CORS hatası veriyor?

CORS (Cross-Origin Resource Sharing), tarayıcıların güvenlik politikasıdır. Eğer veri çektiğiniz sunucu, sizin alan adınızdan gelen isteklere izin vermiyorsa tarayıcı bu isteği engeller. Bu durum genellikle sunucu tarafında ayarlanması gereken bir izin konusudur.

Fetch ile yükleme durumu (loading) nasıl gösterilir?

İstek başlamadan önce bir değişkeni true yapıp, istek bittiğinde (finally bloğunda) false yaparak kullanıcıya bir yükleme animasyonu gösterebilirsiniz.

Birden fazla isteği aynı anda nasıl yaparım?

Promise.all([fetch(url1), fetch(url2)]) yapısını kullanarak birden fazla isteği paralel olarak gerçekleştirebilir ve tümü bittiğinde verileri işleyebilirsiniz.

Fetch API ile dosya yükleyebilir miyim?

Evet, FormData nesnesini kullanarak body kısmına dosya verisi ekleyip sunucuya gönderebilirsiniz.

Fetch API'yi iptal edebilir miyim?

Evet, AbortController arayüzünü kullanarak devam eden bir Fetch isteğini iptal etmeniz mümkündür.

Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) veri çekerken API anahtarlarınızı (API Keys) asla istemci tarafında (frontend) açıkta bırakmayın; hassas işlemleri her zaman arka uç (backend) üzerinden gerçekleştirin.

Fetch API ile Performans Optimizasyonu ve İleri İpuçları

Fetch API kullanırken performans, özellikle mobil cihazlarda ve düşük bant genişliğine sahip ağlarda kritik bir rol oynar. Sadece veriyi çekmek yeterli değildir; bu verinin ne kadar hızlı işlendiği ve tarayıcı kaynaklarının nasıl yönetildiği de önemlidir.

İstekleri Önceliklendirme ve İptal Mekanizmaları

Modern tarayıcılar, fetch isteklerine priority parametresi eklemenize olanak tanır. Bu sayede kritik olan verilerin (örneğin kullanıcı profil bilgisi) daha önce yüklenmesini sağlayabilirsiniz.

// Yüksek öncelikli veri çekme
fetch('https://api.ornek.com/user-profile', {
  priority: 'high'
})
.then(response => response.json())
.then(data => console.log(data));

Response Önbellekleme (Caching) Stratejileri

Her istekte sunucuya gitmek yerine, tarayıcının yerel önbelleğini kullanmak hem maliyeti düşürür hem de kullanıcı deneyimini iyileştirir. cache seçeneği ile bu süreci yönetebilirsiniz:

• default: Tarayıcı standart önbellek kurallarını izler.
• no-cache: Tarayıcı, sunucuya istek gönderip verinin değişip değişmediğini kontrol eder.
• reload: Önbelleği atlar ve doğrudan sunucudan veri çeker.
• force-cache: Sunucuya hiç bakmadan sadece önbellekteki veriyi kullanır.

Fetch API için Birim Testi Yazma

Fetch isteklerini test etmek, uygulamanızın kararlılığı için hayati önem taşır. Gerçek bir API'ye istek atmak yerine, global.fetch metodunu "mock"layarak (taklit ederek) test süreçlerinizi hızlandırabilirsiniz.

Jest ile Fetch Mocking Örneği

Aşağıdaki örnekte, bir API çağrısının başarılı olup olmadığını test eden basit bir yapı görülmektedir:

// fetch.test.js
global.fetch = jest.fn(() =>
  Promise.resolve({
    ok: true,
    json: () => Promise.resolve({ data: 'Test verisi' }),
  })
);

test('API verisi doğru şekilde çekiliyor', async () => {
  const response = await fetch('https://api.ornek.com/data');
  const data = await response.json();
  
  expect(data.data).toBe('Test verisi');
  expect(fetch).toHaveBeenCalledTimes(1);
});

İpucu: Büyük ölçekli projelerde msw (Mock Service Worker) gibi kütüphaneler kullanarak ağ katmanını simüle etmek, birim testlerinizin daha gerçekçi sonuçlar vermesini sağlar.

Büyük Veri Setlerinde Stream Kullanımı

Eğer çok büyük bir JSON dosyası veya veri akışı ile çalışıyorsanız, response.json() tüm veriyi belleğe yükler. Bunun yerine response.body.getReader() kullanarak veriyi parça parça (chunk) okumak, tarayıcının donmasını engeller ve bellek kullanımını minimize eder.

async function streamVeriOku(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    console.log('Alınan parça:', decoder.decode(value));
  }
}

Sonuç

JavaScript ile Fetch API kullanarak dış kaynaklı veri çekme süreci, doğru hata yönetimi ve modern asenkron yapılarla birleştiğinde oldukça güçlü bir araçtır. Bu rehberde öğrendiğiniz async/await kullanımı, response.ok kontrolleri ve veri gönderme yöntemleri, profesyonel web projelerinizin temelini oluşturacaktır. Bir sonraki adım olarak, çektiğiniz verileri dinamik olarak HTML listelerine veya kartlarına dönüştüren bir "Veri Listeleme Uygulaması" geliştirerek öğrendiklerinizi pekiştirebilirsiniz.