JavaScript Fetch API (Basit API Kullanımı)

Web geliştirme süreçlerinde sıkça ihtiyaç duyulan işlemlerden biri, başka bir kaynaktan veri çekmektir. İşte tam da bu noktada Fetch API, JavaScript’in modern ve sade veri alma aracıdır. XMLHttpRequest’in yerini alarak daha okunabilir ve yönetilebilir bir yapı sunar.

Bu yazıda, JavaScript Fetch API basit kullanımı üzerine örneklerle açıklamalı bir rehber sunuyorum. Özellikle yeni başlayanlar için oldukça faydalı olacak bu içerikte, gerçek bir API’den veri çekme ve hata yönetimini adım adım öğreneceksiniz.

Fetch API Nedir?

Fetch API, HTTP üzerinden veri alışverişi yapmak için kullanılan, yerleşik ve söz tabanlı (promise-based) bir JavaScript arayüzüdür. REST API’lerden veri almak veya veri göndermek için yaygın şekilde kullanılır.

Fetch kullanımı oldukça basittir ve ES6 sonrası modern projelerde standart haline gelmiştir.

Temel Fetch Kullanımı

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Hata oluştu:", error));

Bu örnekte, sahte bir REST API’den gönderiler çekilir. İşlem üç aşamada gerçekleşir:

1. fetch(): Veriyi çeker
2. .then(): Gelen yanıtı işler (JSON formatına çevirir)
3. .catch(): Hata varsa yakalar

JSON Formatında Veri Alma

API’ler genellikle verileri JSON formatında gönderir. Bu nedenle response.json() kullanarak veriyi işlenebilir JavaScript nesnesine dönüştürürüz.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(users => {
    users.forEach(user => {
      console.log(`${user.name} - ${user.email}`);
    });
  });

Bu kodla her kullanıcının ismi ve e-posta adresi konsola yazdırılır.

POST İsteği ile Veri Gönderme

Fetch sadece veri almak için değil, aynı zamanda veri göndermek için de kullanılır.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Yeni Başlık',
    body: 'İçerik detayı',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Hata:", error));

Önemli Noktalar:

• method POST olmalı
• headers içinde içerik tipi belirtilmeli
• body kısmı JSON.stringify() ile string’e çevrilmeli

Hataları Yakalama ve Yönetme

Fetch işlemlerinde her zaman catch() bloğu kullanılmalı. Aksi takdirde ağ hataları sessizce göz ardı edilir.

fetch('https://api.gecersizurl.com')
  .then(response => {
    if (!response.ok) throw new Error("HTTP Hatası: " + response.status);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error("Yakalanan Hata:", error.message));

API Cevaplarını HTML’e Yazdırmak

Örneğin kullanıcı listesini ekrana bastırmak için:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(users => {
    let html = "";
    users.forEach(user => {
      html += `<li>${user.name} (${user.email})</li>`;
    });
    document.getElementById("kullanicilar").innerHTML = html;
  });

HTML:

<ul id="kullanicilar"></ul>

javascript fetch api basit kullanımı

Modern web projelerinde veri alışverişi artık Fetch API ile çok daha basit ve etkili. JavaScript Fetch API basit kullanımı, dış kaynaklardan veri alma, form gönderimi ve API bağlantısı kurma gibi işlemler için vazgeçilmez bir tekniktir.

Özellikle then(), catch(), async/await yapılarıyla birlikte kullanıldığında son derece esnek ve okunabilir bir kod yapısı sağlar. İster basit bir blog sayfası yapıyor olun, ister büyük bir SPA (Single Page Application), fetch kullanımı projelerinizi API destekli hale getirir.

Sık Sorulan Sorular

Fetch API nedir?
Fetch API, HTTP istekleri göndermek ve veri almak için kullanılan modern JavaScript özelliğidir.

JSON verisi nasıl alınır?
response.json() ile alınan veri JavaScript nesnesine dönüştürülür.

Fetch ile nasıl POST işlemi yapılır?
POST işlemi için fetch() fonksiyonuna method, headers ve body parametreleri verilir.

Fetch hangi tarayıcılarda çalışır?
Tüm modern tarayıcılarda desteklenir. Eski tarayıcılar için axios veya XMLHttpRequest tercih edilebilir.

Fetch ile hata nasıl yakalanır?
.catch() bloğu ile hatalar yakalanabilir. Ayrıca response.ok kontrolü yapılmalıdır.

Fetch senkron mu çalışır?
Hayır, asenkron çalışır. Genellikle promise ya da async/await ile kullanılır.

Sonuç

JavaScript ile web geliştirme yaparken, veri çekmek veya göndermek Fetch API sayesinde hem kolay hem de güvenilir hale geliyor. Özellikle basit API kullanımıyla başlayan geliştiriciler için Fetch, kodlarını daha profesyonel ve sürdürülebilir hale getirmenin ilk adımıdır.