JavaScript öğrenme serüveninizde değişkenleri, döngüleri, nesneleri ve DOM manipülasyonunu öğrendiniz. Artık kendi başınıza çalışan harika web sayfaları yapabiliyorsunuz. Ancak modern web dünyasında uygulamalar tek başlarına, dış dünyadan izole bir şekilde yaşamazlar. Bir e-ticaret sitesindeki ürün listesi, bir hava durumu uygulamasındaki anlık sıcaklık verisi veya sosyal medyadaki yeni gönderiler, her zaman başka bir sunucudan anlık olarak çekilir.
İşte web sayfanızın “dış dünya” (sunucular ve veritabanları) ile konuşmasını sağlayan en modern ve esnek JavaScript aracı Fetch API‘dir. Bu kapsamlı rehberde, ilk defa dışarıdan veri çekecek geliştiriciler için API kavramını, Fetch API’nin ne olduğunu, Promise yapısıyla nasıl çalıştığını ve modern async/await yazımıyla nasıl kusursuz hale getirildiğini adım adım ve bol örnekle öğreneceğiz.
1. API Nedir ve Neden İhtiyacımız Var?
Teknik detaylara girmeden önce API (Application Programming Interface – Uygulama Programlama Arayüzü) kavramını anlamak çok önemlidir. API’leri, iki farklı yazılımın birbiriyle iletişim kurmasını sağlayan kurallar bütünü veya birer “garson” olarak düşünebilirsiniz.
Örneğin, bir restoran uygulamasında (frontend – sizin web sayfanız) müşteri bir sipariş verir. API (garson), bu siparişi mutfağa (sunucuya ve veritabanına) götürür ve mutfaktan çıkan yemeği (veriyi) alıp tekrar size getirir. HTTP (Hypertext Transfer Protocol) kuralları üzerinden çalışan bu sistem sayesinde, veritabanına doğrudan bağlanmadan, sadece izin verilen API adreslerine (URL veya endpoint) istek atarak ihtiyaç duyduğunuz verileri JSON formatında güvenle alabilirsiniz.
2. Fetch API Nedir? (Geçmişten Günümüze)
Geçmişte JavaScript ile sunucuya sayfa yenilenmeden arka planda istek (HTTP Request) atmak için XMLHttpRequest adı verilen oldukça karmaşık ve yazımı zor bir yapı (AJAX) kullanılıyordu.
Ancak modern web geliştirme standartlarıyla birlikte, ağ istekleri yapmak için çok daha okunaklı, ergonomik ve güçlü bir soyutlama sunan Fetch API hayatımıza girdi. Tarayıcıların içine yerleşik bir Web API’si olan Fetch, dış kaynaklardan veri almayı veya dış kaynaklara veri göndermeyi tek bir satır kodla başlatabilmemizi sağlar.
3. Fetch API’nin Temel Kullanımı ve Promise Mantığı
Fetch API, arka planda Promise (Söz) yapısını kullanır. Çünkü internet üzerinden bir sunucuya istek attığınızda, verinin size ne zaman döneceğini (gecikmeleri, internet hızını) bilemezsiniz. JavaScript bu süre zarfında tüm siteyi dondurmamak için (single-threaded olduğu için) bu işlemi asenkron (eşzamanlı olmayan) olarak başlatır ve size “Veri geldiğinde sana haber vereceğim” diyerek bir Promise (Söz) döndürür.
En temel fetch() kullanımı şu şekildedir:
let url = "https://jsonplaceholder.typicode.com/users";
fetch(url)
.then(response => response.json())
.then(data => console.log(data));
Yukarıdaki kodu adım adım inceleyelim:
fetch(url): Belirtilen adrese bir ağ isteği başlatır..then(response => response.json()): İstek başarılı olup bir cevap (response) geldiğinde ilk.then()bloğu çalışır. Gelen cevap genellikle düz bir metin şeklindedir. Bir önceki konumuz olan JSON’u hatırlayın; bu metni JavaScript’in anlayabileceği gerçek bir nesneye veya diziye dönüştürmek içinjson()metodunu kullanırız..then(data => console.log(data)): Dönüştürme işlemi de bittikten sonra, asıl kullanılabilir verimiz (data) ikinci.then()bloğuna düşer. Artık bu veriyi ekrana yazdırabilir veya DOM manipülasyonu ile sayfanıza ekleyebilirsiniz.
4. Modern Yöntem: async ve await ile Fetch Kullanımı
Her ne kadar .then() zincirleri eski AJAX yapısına göre harika olsa da, çok sayıda arka arkaya istek atıldığında kod okunabilirliği azalabilir. ES8 (ECMAScript 2017) ile hayatımıza giren async/await kelimeleri, asenkron işlemleri sanki normal senkron (sırayla çalışan) bir kodmuş gibi okumamızı ve yazmamızı sağlar.
Bir fonksiyonun başına async yazdığınızda, içeride await kelimesini kullanarak Promise’lerin sonuçlanmasını bekleyebilirsiniz. Aynı veri çekme işlemini async/await ile şu şekilde yazabiliriz:
// Sunucudan veri çekme örneği
async function veriGetir() {
try {
const yanit = await fetch('https://jsonplaceholder.typicode.com/users');
const veri = await yanit.json();
console.log(veri);
} catch (hata) {
console.log("Bir hata oluştu", hata);
}
}
// Fonksiyonu çağırarak işlemi başlatıyoruz
veriGetir();
Not: Bu örnekteki kod mimarisi, ES8’in async/await standartlarını kusursuz bir şekilde yansıtmaktadır.
Bu modern yazımda kod yukarıdan aşağıya doğru akarken, await kelimesini gördüğü satırda verinin inmesini bekler, indiği anda bir alt satıra geçer. Çok daha temiz ve anlaşılırdır!
5. Hataları Yakalamak (Error Handling)
Dış sunucularla çalışırken her şeyin yolunda gideceğinin bir garantisi yoktur. İnternet bağlantısı kopabilir, sunucu çökebilir veya yanlış bir URL girmiş olabilirsiniz. Bu gibi durumların programınızı çökertmemesi için try...catch bloklarını kullanmalıyız. Yukarıdaki örnekte try içine riskli olan fetch işlemimizi yazdık. Eğer bir ağ hatası olursa, sistem doğrudan catch bloğuna atlar ve hatayı zarafetle yakalayıp kullanıcıya “Şu an sunucuya ulaşılamıyor” gibi bir mesaj gösterebiliriz.
Kritik Bir Detay: fetch() metodu, sunucu 404 (Sayfa Bulunamadı) veya 500 (Sunucu Hatası) gibi hatalar verse bile ağ bağlantısı koptuğu durumlar hariç işlemi “başarısız” (reject) saymaz. Bu yüzden gelen cevabın durumunu kontrol etmek en iyi pratiktir:
async function guvenliVeriGetir() {
try {
const yanit = await fetch('https://api.ornek.com/veri');
// Sunucu hata kodu döndürdüyse kendi hatamızı fırlatıyoruz
if (!yanit.ok) {
throw new Error("HTTP Hatası: " + yanit.status);
}
const veri = await yanit.json();
console.log("Başarılı veri:", veri);
} catch (hata) {
console.error("İşlem başarısız oldu:", hata.message);
}
}
6. Gerçek Dünyadan Bir Proje: API’den Gelen Veriyi Ekrana Yazdırmak
Tüm öğrendiklerimizi (DOM Manipülasyonu, Olaylar, JSON ve Fetch) birleştiren tam teşekküllü bir örnek yapalım. Sayfamızda bir buton olsun; tıklandığında sahte bir API’den kullanıcı listesini çeksin ve HTML sayfamızda bir liste (ul > li) olarak göstersin.
HTML Kısmı:
<button id="kullaniciGetirBtn">Kullanıcıları Getir</button>
<ul id="kullaniciListesi"></ul>
JavaScript Kısmı:
// 1. DOM Elementlerini seçiyoruz
const buton = document.getElementById("kullaniciGetirBtn");
const liste = document.getElementById("kullaniciListesi");
// 2. Butona tıklama (click) olayı ekliyoruz
buton.addEventListener("click", kullanicilariYukle);
// 3. Fetch işlemini yapacak Async fonksiyonumuz
async function kullanicilariYukle() {
// Yükleniyor mesajı gösterelim
liste.innerHTML = "<li>Yükleniyor... Lütfen bekleyin.</li>";
try {
// API'ye gidiyoruz (Burada ücretsiz test API'si kullanıyoruz)
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) throw new Error("Veri çekilemedi!");
// Gelen metni JSON/JavaScript nesnesine çeviriyoruz
const users = await response.json();
// Önceki yükleniyor yazısını temizliyoruz
liste.innerHTML = "";
// 4. Dizide (Array) dönerek her bir kullanıcıyı HTML'e ekliyoruz
users.forEach(user => {
const li = document.createElement("li");
li.textContent = `${user.name} - (E-posta: ${user.email})`;
liste.appendChild(li);
});
} catch (error) {
// Bir hata olursa kullanıcıyı bilgilendir
liste.innerHTML = `<li style="color: red;">Hata: ${error.message}</li>`;
}
}
Bu projeyi bilgisayarınızda çalıştırdığınızda, butona tıkladığınız an JavaScript’in arka planda başka bir sunucuya seyahat edip, o verileri getirip sayfanıza anında enjekte ettiğini göreceksiniz.
Sonuç
JavaScript Fetch API, web sayfalarınızı dünyaya bağlayan kapıdır. Daha önceki derslerimizde incelediğimiz DOM yapısını, JSON veri formatını ve modern ES6+ async/await sözdizimini bu konuda kusursuzca harmanladık. Verileri çekmek (fetch), onları kullanışlı nesnelere dönüştürmek (.json()) ve try...catch ile oluşabilecek ağ hatalarına karşı önlem almak, profesyonel bir web geliştiricisinin en temel yetkinliklerindendir. Artık statik sitelere veda etmeye ve internetteki sayısız ücretsiz API’yi (hava durumu, kripto paralar, film veritabanları) kendi projelerinize entegre etmeye hazırsınız! Bol bol pratik yapmayı unutmayın.
