JavaScript ile Fetch API ve Axios Kullanımı

Giriş

Modern web geliştirme dünyasında, sunucudan veri almak ve sunucuya veri göndermek yaygın bir gereklilik haline gelmiştir. Bu işlem, genellikle HTTP istekleri ile yapılır. JavaScript, tarayıcılar üzerinden asenkron veri iletişimi kurmak için çeşitli araçlar sunar ve bu araçlardan en popüler olanları Fetch API ve Axios'tur.

Bu yazıda, Fetch API ve Axios kullanarak HTTP isteklerinin nasıl yapıldığını, her iki yöntem arasındaki farkları ve avantajlarını inceleyeceğiz. Ayrıca, her iki aracın kullanımı ile ilgili örnekler sunacağız.

Fetch API Nedir?

Fetch API, JavaScript'te HTTP istekleri göndermek ve almak için kullanılan modern bir API'dir. fetch() fonksiyonu, Promises kullanarak asenkron veri işleme sağlar. Fetch API, eski yöntemlere göre daha temiz ve okunabilir bir sözdizimine sahiptir.

Fetch API Özellikleri:

• Asenkron Yapı: fetch() fonksiyonu, HTTP isteklerinin sonucunu bir Promise nesnesi olarak döndürür.
• Kolay Kullanım: Veri alma ve gönderme işlemleri daha basit ve anlaşılırdır.
• Desteklenen Tarayıcılar: Modern tarayıcılar Fetch API'yi destekler, ancak eski tarayıcılarda desteklenmeyebilir.

Fetch API Kullanımı

Fetch API ile veri almak ve göndermek oldukça basittir. İşte temel kullanım:

Veri Alma (GET İsteği)

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.log('There was a problem with your fetch operation:', error));

Veri Gönderme (POST İsteği)

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.log('Error:', error));

Axios Nedir?

Axios, modern JavaScript uygulamalarında kullanılan bir kütüphanedir. HTTP isteklerini yapmak için kullanılan Promise tabanlı bir kütüphanedir ve Fetch API'nin daha gelişmiş bir versiyonudur. Axios, veri işleme, hata yönetimi ve çoklu platform desteği gibi özelliklerle Fetch API'ye göre daha fazla esneklik sunar.

Axios, Node.js'te ve tarayıcılarda çalışabilir, bu da onu web uygulamaları ve sunucu tarafı uygulamaları için ideal bir çözüm yapar.

Axios Özellikleri:

• Promise Tabanlı: Axios, HTTP istekleri için Promise kullanır.
• Gelişmiş Hata Yönetimi: Axios, hata yönetimi konusunda daha kullanıcı dostudur.
• Veri İçeriği Otomatik Çözümleme: JSON verileri otomatik olarak parse edilir, böylece .json() gibi ek bir işleme yapmanıza gerek yoktur.
• İstek İptali: Axios, isteklerinizi iptal etmenize olanak tanır.
• Daha Fazla Özellik: Axios, Fetch API'ye göre daha fazla özelliğe sahip olup, veri gönderme, istek başlıkları ayarlama ve yanıtları dönüştürme gibi işlemleri kolaylaştırır.

Axios Kullanımı

Veri Alma (GET İsteği)

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.log('There was an error!', error));

Veri Gönderme (POST İsteği)

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'foo',
    body: 'bar',
    userId: 1
})
  .then(response => console.log('Success:', response.data))
  .catch(error => console.log('Error:', error));

Fetch API vs Axios: Karşılaştırma

Fetch API ve Axios ile Veri Alma ve Gönderme: Hangi Durumda Hangisini Kullanmalı?

Fetch API Kullanmak İçin Durumlar:

• Daha basit projeler veya API entegrasyonları için tercih edilebilir.
• Tarayıcı desteği modernse ve basit GET ve POST istekleri yeterliyse Fetch API kullanabilirsiniz.

Axios Kullanmak İçin Durumlar:

• İleri düzey istek yönetimi veya daha büyük projeler için Axios tercih edilebilir.
• Gelişmiş hata yönetimi ve otomatik JSON çözümleme gibi özelliklerden faydalanmak istiyorsanız Axios ideal bir seçim olacaktır.
• İstek iptali veya çoklu platform desteği gerektiğinde Axios kullanmak daha uygun olacaktır.

Sonuç

Fetch API ve Axios, JavaScript'te HTTP isteklerini yapmak için en popüler iki yöntemdir. Her ikisi de Promise tabanlıdır ve asenkron veri işlemlerini kolaylaştırır. Ancak, Axios ek özellikleri ve gelişmiş hata yönetimi ile daha esnek ve güçlü bir seçenek sunarken, Fetch API daha basit ve minimal bir çözüm sunar.

Projenizin ihtiyaçlarına göre, her iki yöntemi de seçebilirsiniz. Küçük ve basit projelerde Fetch API yeterli olabilirken, daha büyük ve karmaşık projelerde Axios’un sunduğu ek özelliklerden faydalanabilirsiniz.