Örneklerle JavaScript Fetch Api Kullanımı

JavaScript ile çalışırken çoğu zaman APIler üzerinden veri alışverişinde bulunmak gerekir. Kimi mesela döviz fiyatlarını almak veya bir ürün bilgisine ulaşmamız gerekebilir. Bununla birlikte bir e-ticaret sitesindeki ürün fiyatını da güncellememiz gekekebilir. Bu tip işlemler için JavaScript bize Fetch APIyi sunuyor.

Daha öncesinde XMLHttpRequest yapılan bu işlemler için çok daha kolay bir yol sunar.

JavaScript Fetch API Nedir?

Fetch Api JavaScript ile bir protokol üzerinden istekte bulunmak ve cevaplarını almak ve ayrıca bu veriler üzerinde işlem yapmak için geliştirilmiş bir arayüzdür. Aynı zamanda bu işlemleri yapmak için global fetch metodunu bize sunar.

Fetch Api İle Neler Yapılabilir?

Bir sunucuya dosya gönderme, dosya alma gibi işlemler yapılabilir. Metin dosyası, json dosyası veya bir jpg dosyasını sunucuya gönderilebilir veya alınabilir.

Ayrıca API üzerinden veri alınabilir ve veriler gönderilebinir. Bu şekilde veriler üzerinde de işlem yapılabilir.

Temel Fetch Kullanımı

En temel hali ile fetch metodu kullanılırken sadece gerekli adresin verilmesi yeterli olacaktır. Mesela json dosyası alacağımız bir işlemimiz olsun.

fetch(adres)
    .then(res => return res.json())
    .then(data => console.log(data));

Yukarıdaki şekilde bir kullanım yeterli olacaktır. adres yazılan yerde ulaşacağımız kaynağın adresi olması gereklidir. Burada dikkat etmemiz gereken fetch bir Promise dönder ve bu konuyu anlayabilmek için JS Promise yapısını bilmek gerekiyor.

Mesela fake bir api servisi olan https://jsonplaceholder.typicode.com/ üzerinden üye bilgilerini alarak konsola yazdırmak isteyelim. Sonra da adım adım ne yaptığımıza bakalım.

const adres = 'https://jsonplaceholder.typicode.com/users';

fetch(adres)
    .then(res => return res.json())
    .then(data => console.log(data));

Öncelikle yapılan işlemleri adım adım inceleyelim.

• İlk olarak istekte bulunacağımız adresi bir değişkene atadık. const adres = 'https://jsonplaceholder.typicode.com/users';
• fetch(adres) ile isteğimizi yaptık.
• Sonrasında sonuç bir Promise olarak döndüğü için then ile sonucu yakalıyoruz. Gelen bilgiyi bir değişken ile yakalıyoruz. Biz burada res adı verdik. Farklı bir isim de verilebilir.
• Gelen bilgi bir promise nesnesidir. Bu nesne içerisinde json bilgisini almak için return res.json(); kodunu kullanıyoruz. Burada json metodu gelen bilgi içerisinde json bilgilerini almak için kullanılır.
• Sonrasında yeni bir then ifadesi ile json olarak gelen bilgiyi yakalıyoruz ve bu bilgiyi data değişkenine atıyoruz.
• data değişkeni artık bize gelen bilgiyi içeriyor. console.log(data) diyerek konsola gelen veriyi yazdırıyoruz.

Hata Denetimi

Bir APIden istekte bulunduğumuzda her zaman istediğimiz olmayabilir ve hata oluşabilir. Bu gibi durumlarda catch ile gelen hatayı yakalayarak ona göre hareket edebiliyoruz.

const adres = 'https://jsonplaceholder.typicode.com/users';

fetch(adres)
    .then(res => return res.json())
    .then(data => console.log(data))
    .catch(err => console.log(err));

Yukarıdaki kod çalışırken bir hata oluştuğunda catch blogğu çalışacaktır.

Bir Metin Dosyasını Almak

Eğer istek yapacağımız yerden bir metin dosyası alacaksak benzer işlemleri yapıyoruz, farklı olarak json değil text metodunu kullanıyoruz.

const adres = "http://istekyapilacakadres.com";
fetch(adres)
    .then(res => return res.text())
    .then(data => console.log(data));

Diğer işlemler aynı şekilde kalabilir. Bu işlem sonucunda istek yapılacak yerdeki metin dosyası alınarak konsola basılacaktır.

Yapılan İşlem Başarılı Oldu mu?

Bir istek yaptığımızda sonucun başarılı olup olmadığına göre işlem yapmak isteriz. Bunun için alınan cevabın ok özelliği kullanılır. Örnek vermek gerekirse

const adres = 'https://jsonplaceholder.typicode.com/users';

fetch(adres)
    .then(res => {
        if(!res.ok) {
            // Cevap doğru şekilde alınamadı
            throw new Error("İstenilen bilgi alınamadı.");
        }
        return res.json();
    })
    .then(data => console.log(data))
    .catch(err => console.log(err));

hata oluştuğunda bunu yakalamak için throw ile yeni bir hata fırlatabiliriz.

fetch İstek Bilgilerini Düzenlemek

fetch ile bir istek yapıldığında ön tanımlı ayarlar kullanılır. Mesela yapılan bir istekde herhangi başka bir şey belirtimedi ise GET metodu kullanılır. Kullanılan metodlar, header ve güvenlik ayarları için options parametresi kullanılır. Bu parametre bir objedir ve istenilen ayar bilgilerini içerir. Kullanım şekli

fetch(adres, options);

gibidir. Kullanılabilecek özellik ve değerlerinden bazıları şu şekildedir.

• method kulanılacak metodu belirtir GET veya POST gibi bir değer alabilir.
• headers isteğe eklenmek istenen header bilgilerini string olarak içerir.
• body isteğe eklenmek isteden body değerini içerir.
• credentials tarayıcının kimlik bilgileri ne yapacağını kontrol eder. omit, include ve same-origindeğerlerini alabilir.
• cache string bir değer olan bu bilgi tarayıcının HTTP cache ile nasıl etkileşime geçeceğini belirtir ve default, no-store, reload, no-cache, force-cache ve only-if-cached değerlerini alabilir.

Diğer ayarlar ve ayrıntılı bilgi için https://developer.mozilla.org/en-US/docs/Web/API/fetch adresine bakabilirsiniz.

Örnek bir kullanım

const ayarlar = {
    method: 'GET',
    cache: 'default'
}

const adres = 'https://jsonplaceholder.typicode.com/users';

fetch(adres, ayarlar)
    .then(res => res.json())
    .then(data => console.log(data));

şeklinde olabilir.

JavaScript Fetch API Post Metodunu Kullanma

Şuana kadar hep GET metodu ile işlem yaptık. Şimdi bir veriyi fetch ile gönderelim.

const data = { kullanici: 'example', sifre: '12345' };
const adres ='http://istekYapilacakAdres.com';
const ayarlar = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
};

fetch(adres)
  .then((response) => response.json())
  .then((data) => {
    console.log('İşlem başarılı:', data);
  })
  .catch((error) => {
    console.error('Hata oluştu:', error);
  });

• Önce bir veri oluşturduk ve data adını verdik.
• Sonra adresi ayarladık.
• fetch ayarlarını oluşturduk. Veri göndereceğimiz için metodu POST yaptık.
• headers bilgisini girdik.
• body olarak göndereceğimiz datayı girdik. Ama öncesinde JSON.stringify kullandık.
• Ve sonrasında fetch ile işlemi yaptık.

İşlem sonucunda eğer veri istediğimiz yere başarı ile gönderildi ise then bloğu ile yakalayacağız. Hata oluşursa catch bloğu çalışacaktır.

Sonuç

Javascript fetch api diğer sistemlerden veri almak veya onlara veri göndermek için geliştirilmiş kullanımı kolay bir arayüzdür. Bir adresten veri istemek veya bir adrese veri göndermek için kullanılabilir.

Soru ve önerilerinizi, kodlama ile ilgili deneyimlerinizi yorumlardan bizimle paylaşabilirsiniz.