JavaScript'te API'den Veri Çekmek: fetch() Basit Anlatım

JavaScript'te API'den veri çekmek için built-in fetch() fonksiyonunu kullanırsın. Hiçbir ek indirme, hiçbir gizli kurulum yok, fetch zaten her modern tarayıcıda hazır bekliyor.

fetch() işini basitçe şöyle düşün: bir sunucuya "Bana şu veriyi gönder" diyorsun, sunucu yanıt veriyor, sen de o yanıtı açıp kullanıyorsun. Tıpkı bir kargo görevlisine adres verip paket getirtmek gibi.

Pratik olarak, fetch() üç adımda çalışır. Birinci adımda URL'i fetch()'e verirsin. İkinci adımda sunucudan gelen yanıtı beklersin (response). Üçüncü adımda response.json() ile o yanıtı JavaScript'in anlayacağı veri haline dönüştürürsün.

Bir örnek görelim. Diyelim ki bir hava durumu API'sinden veri almak istiyorsun:

1fetch('https://api.weather.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.log('Hata:', error));

Burada fetch() promise döndürür. İlk.then() yanıtı JSON'a çevirir. İkinci.then() artık kullanabileceğin veriyi alır..catch() ise ağ sorunu ya da API hatası varsa devreye girer.

Modern JavaScript'te async/await kullanmak daha temiz görünür:

1async function verileriCek() {
2try {
3const response = await fetch('https://api.weather.example.com/data');
4const data = await response.json();
5console.log(data);
6} catch (error) {
7console.log('Hata:', error);
8}
9}
10
11verileriCek();

Bu yöntemde kodun satır satır okunması daha kolay. await, promise'in sonucunu bekler; try/catch ise hataları yakalar.

Bir önemli nokta: API yanıtını kontrol etmelisin. response.ok ile başarılı olup olmadığını, response.status ile HTTP kodunu kontrol edebilirsin. Mesela 404 (bulunamadı) ya da 500 (sunucu hatası) gelirse, kullanıcıya anlamlı bir mesaj göster.

fetch() ile veri çekmek bu kadar basit. Kütüphane yüklemeye gerek yok, tarayıcı sana yetecek. Orijinal makaleyi okuyarak daha derinlemesine örnekler görebilirsin.