Axios vs. Fetch: HTTP İstekleri için Hangisi En İyisi?

```html

HTTP istekleri, web uygulamalarında sunucular ve API'lerle iletişim kurmak için gereklidir. JavaScript'te HTTP istekleri yapmanın birçok yolu vardır, ancak en popülerlerinden ikisi Axios ve fetch() 'dir. Bu yazıda, Axios ve Fetch()'i karşılaştırıp farklı senaryolar için hangisinin en iyi olduğunu göreceğiz.

button

Axios Nedir?

Axios, HTTP istekleri yapmak için promise tabanlı bir HTTP istemcisi sağlayan üçüncü taraf bir kütüphanedir. Axios, JavaScript topluluğunda yaygın olarak kullanılır ve basitliği ve esnekliği ile bilinir

Axios'un Temel Sözdizimi

Axios kütüphanesinin temel sözdizimi aşağıdaki gibidir:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Temel özellikler:

Hem URL'yi hem de yapılandırmayı bir parametre olarak veya ayrı URL ve yapılandırma nesnesi olarak kabul edebilir.
Sunucuya veri göndermek için data özelliğini kullanır ve JSON dönüşümünü otomatik olarak işler.
Sunucu verilerini doğrudan yanıt nesnesinin data özelliğinde döndürür.
HTTP hata durum kodlarını otomatik olarak işler ve bunları catch bloğuna geçirir.
Daha düzenli bir hata işleme mekanizması sağlar.

Örnek:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('Server responded with:', error.response.status);
    } else if (error.request) {
      console.error('No response received');
    } else {
      console.error('Error:', error.message);
    }
  });

Neden Axios Kullanmalısınız?

Şu gibi kullanımı kolay ve kullanışlı hale getiren birçok özelliği vardır:

Otomatik JSON veri dönüşümü: Axios, verileri otomatik olarak JSON'a ve JSON'dan dönüştürür, böylece bunları manuel olarak ayrıştırmanız veya stringify etmeniz gerekmez.
Yanıt zaman aşımı: Axios, istekleriniz için bir zaman aşımı ayarlamanıza olanak tanır, böylece sunucunun yanıt vermesi çok uzun sürerse hataları işleyebilirsiniz.
HTTP kesiciler: Axios, istekleri ve yanıtları then veya catch tarafından işlenmeden önce yakalamanıza olanak tanır, böylece bunları değiştirebilir veya ek mantık ekleyebilirsiniz.
İndirme ilerlemesi: Axios, indirmelerinizin ve yüklemelerinizin ilerlemesini izleyebilir, böylece kullanıcıya geri bildirim görüntüleyebilir veya gerekirse isteği iptal edebilirsiniz.
Eşzamanlı istekler: Axios, aynı anda birden fazla istek yapabilir ve bunları axios.all ve axios.spread kullanarak tek bir yanıtta birleştirebilir.

Fetch() Nedir?

fetch(), yerel JavaScript ile birlikte gelen yerleşik bir API'dir. Promise'lar biçiminde veri döndüren eşzamansız bir web API'sidir. fetch(), tüm modern tarayıcılar tarafından desteklenir, bu nedenle kullanmak için herhangi bir harici kütüphane içe aktarmanıza gerek yoktur. fetch() 'in bazı özellikleri şunlardır:

Temel sözdizimi: fetch(), ilk argüman olarak almak istediğiniz kaynağın URL'sini ve ikinci argüman olarak isteğe bağlı bir seçenek nesnesini alan basit ve öz bir sözdizimine sahiptir.
Geriye dönük uyumluluk: fetch(), whatwg-fetch veya fetch-ponyfill gibi bir polyfill kullanarak desteklemeyen eski tarayıcılarda kullanılabilir.
Özelleştirilebilir: fetch(), başlıkları, gövdeyi, yöntemi, modu, kimlik bilgilerini, önbelleği, yönlendirmeyi ve yönlendirme politikalarını özelleştirebildiğiniz için istekleriniz ve yanıtlarınız üzerinde daha fazla kontrol sağlar.

HTTP İstekleri Yapmak İçin Axios Nasıl Kullanılır?

Axios'u kullanmak için, npm veya yarn kullanarak yüklemeniz gerekir:

npm install axios

Ve işte Axios'u yarn kullanarak nasıl yükleyeceğiniz:

yarn add axios

Pnpm kullanmayı tercih ediyorsanız, Axios'u aşağıdaki komutu kullanarak yükleyebilirsiniz:

pnpm install axios

Alternatif olarak, projenize Axios'u dahil etmek için bir içerik dağıtım ağı (CDN) kullanabilirsiniz. İşte bir CDN kullanarak Axios'u nasıl dahil edeceğiniz:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Ardından, JavaScript dosyanıza içe aktarabilir ve HTTP istekleri yapmak için kullanabilirsiniz. Örneğin, bir URL'ye GET isteği yapmak için axios.get() kullanabilirsiniz:

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fetch ile HTTP İstekleri Yapma

fetch() kullanmak için, tarayıcıda zaten mevcut olduğu için hiçbir şey yüklemenize gerek yoktur. HTTP istekleri yapmak için fetch() işlevini kullanabilirsiniz. Örneğin, bir URL'ye GET isteği yapmak için fetch() 'i şu şekilde kullanabilirsiniz:

fetch('https://example.com/api')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Şunu unutmayın:

Axios, verileri otomatik olarak JSON'a ve JSON'dan dönüştürürken, fetch() verileri bir JavaScript nesnesine ayrıştırmak için response.json() çağırmanızı gerektirir.
Axios verileri yanıt nesnesinde sağlarken, fetch() durum, başlıklar ve url gibi diğer bilgileri içeren yanıt nesnesini sağlar.
Axios hataları catch bloğunda işlerken, fetch() yalnızca yanıtın bir hata durumu varsa değil, bir ağ hatası varsa promise'ı reddeder.

Fetch'in Temel Sözdizimi

Elbette. İsteğiniz üzerine, içeriği iki ayrı parça halinde İngilizce olarak sağlayacağım.

Fetch API'sinin temel sözdizimi aşağıdaki gibidir:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Temel özellikler:

İlk argüman olarak URL, ikinci argüman olarak isteğe bağlı yapılandırma nesnesi.
Sunucuya veri göndermek için body özelliğini kullanır ve verilerin dizeye manuel olarak dönüştürülmesini gerektirir.
Tam yanıt bilgilerini içeren bir Response nesnesi döndürür.
Yalnızca ağ hatalarında catch bloğuna girer, HTTP hata durum kodlarında girmez.
HTTP hatalarını işlemek için yanıt durum kodlarının manuel olarak kontrol edilmesini gerektirir.

Örnek:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Axios vs Fetch: Sorgu Parametreleri ile GET İsteği Gönderme:

// Axios
axios.get('/api/data', {
  params: {
    name: 'Alice',
    age: 25
  }
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: JSON Gövdesi ile POST İsteği Gönderme:

// Axios
axios.post('/api/data', {
  name: 'Bob',
  age: 30
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: İstek İçin Zaman Aşımı Ayarlama:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 seconds
})
.then(response => {
  // handle response
})
.catch(error => {
  // handle error
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // abort after 5 seconds
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // handle data
})
.catch(error => {
  // handle error
});

Axios vs Fetch: async/await sözdizimini kullanma:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // handle response
  } catch (error) {
    // handle error
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // handle data
  } catch (error) {
    // handle error
  }
}

Axios vs Fetch: Geriye Dönük Uyumluluk

Geriye dönük uyumluluk, daha yeni bir sistemin veya uygulamanın, yükseltme sırasında kesintileri veya arızaları önleyerek sorunsuz bir geçiş sağlayarak eski sürümlerle çalışma yeteneğini ifade eder. Yazılım geliştirme, web geliştirme ve teknoloji ekosistemlerinde istikrarı, uyumluluğu ve tutarlı sürümleri ve platformları korumak için çok önemlidir.

Axios:

Axios, projenize yüklenmesi ve dahil edilmesi gereken üçüncü taraf bir kütüphanedir.
Promise'lar ve diğer modern JavaScript özellikleri için polyfill'ler dahil ederek eski tarayıcıları destekler.
Axios, en son tarayıcı ve Node.js güncellemelerine ayak uydurarak yeni ortamlarda uyumluluğu sağlar ve aktif olarak korunur.
Ancak, ayrı bir kütüphane olduğundan, proje bağımlılıklarınızla uyumlu bir sürüm kullandığınızdan emin olmanız gerekir.

Fetch:

Fetch API, modern tarayıcılar tarafından desteklenen yerel bir Web API'sidir.
Son tarayıcı sürümlerinde mükemmel desteğe sahiptir, ancak eski tarayıcılar (Internet Explorer gibi) onu yerel olarak desteklemez.
Eski tarayıcıları desteklemeniz gerekiyorsa, bir polyfill dahil etmeniz veya bir yedek çözüm (örneğin, XMLHttpRequest) kullanmanız gerekir.
Yerel bir API olduğundan, gelecekteki tarayıcı sürümleriyle uyumluluğu sağlayarak tarayıcı satıcıları tarafından otomatik olarak güncellenir ve korunur.

Axios vs Fetch: Hata İşleme

Hata işleme, ağ hataları, sunucu hataları veya geçersiz yanıtlar gibi farklı senaryoları işlemenize olanak tanıdığı için HTTP istekleri yapmanın önemli bir yönüdür. Fetch ve Axios'un hataları işlemenin farklı yolları vardır, bunları bazı örneklerle karşılaştıracağım.

Axios:

Axios'ta, bir istek hatası varsa, bir hata atar ve hatayı bir try-catch bloğuyla kolayca işleyebilir ve hata verilerini error.response.data'dan alabilirsiniz. Örneğin:

// Axios hata işleme with try-catch
try {
  const response = await axios.get('/api/data');
  // handle response
} catch (error) {
  // handle error
  console.log(error.response.data);
}

Fetch:

Fetch'te, bir istek hatası varsa, bir hata atmaz, ancak ok özelliği false olarak ayarlanmış bir yanıt nesnesi döndürür. Bir try-catch bloğu kullanmak istiyorsanız, ok özelliğini kontrol etmeniz ve manuel olarak bir hata atmanız gerekir.

Alternatif olarak, then yönteminde farklı durumları işlemek için response.ok özelliğini kullanabilirsiniz. Örneğin:

// Fetch hata işleme with try-catch
try {
  const response = await fetch('/api/data');
  // check response status
  if (!response.ok) {
    // throw error if status is not ok
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  // handle response
} catch (error) {
  // handle error
  console.log(error.message);
}

// Fetch hata işleme with response.ok
fetch('/api/data')
  .then(response => {
    // check response status
    if (response.ok) {
      // handle response
    } else {
      // handle error
      console.log(`HTTP error! status: ${response.status}`);
    }
  })
  .catch(error => {
    // handle network error
    console.log(error.message);
  });

Fetch ve Axios arasındaki bir diğer fark, 200 olmayan durum kodlarını nasıl işledikleridir. Axios, 2xx aralığının dışındaki herhangi bir durum kodunu bir hata olarak kabul eder ve promise'ı reddeder. Fetch, herhangi bir geçerli HTTP yanıtını (4xx veya 5xx bile) bir başarı olarak kabul eder ve promise'ı çözer.

Bu, Fetch ve Axios'ta 200 olmayan durum kodlarını farklı şekilde işlemeniz gerektiği anlamına gelir. Örneğin:

// Axios hata işleme for non-200 status codes
axios.get('/api/data')
  .then(response => {
    // handle response
  })
  .catch(error => {
    // handle error
    if (error.response) {
      // server responded with a status code outside 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // network error or request was aborted
      console.log(error.message);
    }
  });

// Fetch hata işleme for non-200 status codes
fetch('/api/data')
  .then(response => {
    // check response status
    if (response.ok) {
      // handle response
    } else {
      // server responded with a status code outside 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // handle error data
    console.log(data);
  })
  .catch(error => {
    // handle network error or request was aborted
    console.log(error.message);
  });

Axios vs Fetch: HTTP İstekleri Yapmak İçin Hangisi En İyisi?

Hangisinin daha iyi olduğuna dair kesin bir cevap yoktur, bu, tercihlerinize ve ihtiyaçlarınıza bağlıdır. Ancak, karar vermenize yardımcı olacak bazı genel yönergeler şunlardır:

Otomatik JSON veri dönüşümü, yanıt zaman aşımı, HTTP kesiciler, indirme ilerlemesi ve eşzamanlı istekler gibi özelliklerle, HTTP istekleri yapmak için basit ve kullanışlı bir yol istiyorsanız Axios kullanın.
Geriye dönük uyumluluk, özel başlıklar, gövde, yöntem, mod, kimlik bilgileri, önbellek, yönlendirme ve yönlendirme politikaları gibi özelliklerle, HTTP istekleri yapmak için yerel ve özelleştirilebilir bir yol istiyorsanız fetch() kullanın.

Apidog ile Axios/Fetch Kodu Oluşturun

Apidog, API'leri tasarlamak, hata ayıklamak, test etmek, yayınlamak ve taklit etmek için kapsamlı bir araç takımı sağlayan hepsi bir arada işbirliğine dayalı bir API geliştirme platformudur. Apidog, HTTP istekleri yapmak için otomatik olarak Axios kodu oluşturmanıza olanak tanır.

button

Axios kodu oluşturmak için Apidog'u kullanma süreci şöyledir:

Adım 1: Apidog'u açın ve yeni istek seçin

Adım 2: Bir istek göndermek istediğiniz API uç noktasının URL'sini girin, isteğe dahil etmek istediğiniz başlıkları veya sorgu dizesi parametrelerini girin, ardından Apidog'un tasarım arayüzüne geçmek için "Tasarım"a tıklayın.

Adım 3: Kodunuzu oluşturmak için "İstemci kodu oluştur"u seçin.

Adım 4: Oluşturulan Axios kodunu kopyalayıp projenize yapıştırın.

HTTP İstekleri Göndermek İçin Apidog Kullanma

Apidog, HTTP isteklerini test etme yeteneğini daha da geliştiren çeşitli gelişmiş özellikler sunar. Bu özellikler, isteklerinizi özelleştirmenize ve daha karmaşık senaryoları zahmetsizce işlemenize olanak tanır.

button

Adım 1: Apidog'u açın ve yeni bir istek oluşturun.

Adım 2: Yapmak istediğiniz POST isteği için API ayrıntılarını bulun veya manuel olarak girin.

Adım 3: Gerekli parametreleri ve istek gövdesine dahil etmek istediğiniz verileri doldurun.

Sonuç

Hem Axios hem de fetch(), JavaScript'te HTTP istekleri yapmak için güçlü ve güvenilir yöntemlerdir. Projenize ve tarzınıza daha uygun olanı seçebilir veya farklı amaçlar için her ikisini de kullanabilirsiniz. Önemli olan, nasıl çalıştıklarını ve bunları nasıl etkili bir şekilde kullanacağınızı anlamaktır.

Apidog'u kullanmak yalnızca değerli zaman ve çabadan tasarruf etmenizi sağlamakla kalmaz, aynı zamanda kodunuzun doğru ve hatasız olmasını da sağlar. Kullanıcı dostu arayüzü ve sezgisel özellikleriyle Apidog, Axios istekleriyle çalışan herhangi bir geliştirici için olmazsa olmaz bir araçtır. İyi kodlamalar!

button

```