Axios: nedir, HTTP istekleri ve API ile çalışmanın temelleri

Axios nedir?

Axios, tarayıcı ve Node.js ortamından HTTP istekleri yapmak için tasarlanmış bir JavaScript kütüphanesidir. Tarayıcıda XMLHttpRequest ve Node.js'de http modülü üzerine inşa edilmiştir ve her iki platform için birleşik bir API sağlar.

Axios'un yerel fetch'e göre ana avantajı, otomatik JSON işleme, interceptor desteği ve daha kullanışlı hata yönetimidir. Fetch'in aksine, Axios JSON yanıt gövdesini almak için iki .then çağrısı gerektirmez ve HTTP hatalarında (4xx, 5xx) otomatik olarak istisna oluşturur.

Kütüphane tüm temel HTTP yöntemlerini destekler: GET, POST, PUT, DELETE, PATCH ve HEAD. Basit projelerden günde yüz binlerce istek alan büyük kurumsal uygulamalara kadar kullanılabilir.

Axios'un temel özellikleri

• Promise API — tüm işlemler Promise döndürür, asenkron kodu basitleştirir
• TypeScript desteği — tüm yöntemler ve yapılandırmalar için tam tip belirleme
• Interceptors — istekleri ve yanıtları işlemek için middleware
• Dönüşüm — giriş ve çıkışta otomatik veri dönüşümü

Axios mimarisi ve çalışma prensibi

Axios mimarisi adaptör kavramına dayanır. Kütüphane taşıma katmanını soyutlar: tarayıcıda XMLHttpRequest'i, Node.js'de http veya https modülünü kullanır. Bu, çalışma ortamından bağımsız olarak tek bir arayüz sağlar.

Her istek, istek yapılandırmasını veya yanıtı değiştirebilen bir interceptor zincirinden geçer. Interceptor'lardan sonra istek, gerçek HTTP çağrısını gerçekleştiren adaptöre iletilir. Yanıt daha sonra uygulama koduna ulaşmadan önce yanıt interceptor'larından geçer.

Axios istek yaşam döngüsü

1. Yapılandırma oluşturma — yöntem, URL, başlıklar, istek gövdesi
2. Talep interceptor'u — yapılandırma değişikliği, token ekleme
3. HTTP çağrısı — tarayıcı veya Node.js adaptörü aracılığıyla yürütme
4. Yanıt interceptor'u — yanıt dönüşümü, hata yönetimi
5. Sonucu döndürme — Promise verilerle çözülür veya reddedilir

Axios'un temel özellikleri

Axios, mobil ve web uygulamalarında HTTP ile çalışmayı kolaylaştıran birçok yerleşik özellik içerir. Başlıca özellikleri inceleyelim.

Otomatik veri dönüşümü

Bir istek gönderirken, Axios JSON.stringify kullanarak bir JavaScript nesnesini otomatik olarak JSON dizesine dönüştürür. Bir yanıt alırken, kütüphane JSON'u tekrar bir nesneye ayrıştırır. Bu, geliştiriciyi manuel serileştirme ve seriden çıkarma işlemlerinden kurtarır.

CSRF koruması

Tarayıcı ortamında Axios, çerezlerden otomatik olarak XSRF-TOKEN başlıklarını ekleyerek uygulamayı siteler arası istek sahteciliğine karşı korur. Bunun için, sunucuyu XSRF-TOKEN adlı bir çerezde token gönderecek şekilde yapılandırmak yeterlidir.

Zaman aşımı ve istek iptali

Kütüphane, timeout parametresi aracılığıyla zaman aşımı ayarlamayı ve AbortController aracılığıyla istek iptalini destekler. Bu, takılı kalan isteklerin pil ve veri tükettiği dengesiz bağlantılı mobil uygulamalarda özellikle önemlidir.

Axios kurulumu ve yapılandırması

Axios kurulumu herhangi bir paket yöneticisi aracılığıyla yapılır. Kütüphane npm kaydında mevcuttur ve hem Node.js hem de tarayıcı projelerinde kullanılabilir. TypeScript için türler ana pakete dahildir — ek bağımlılık gerekmez.

Kurulumdan sonra, temel bir yapılandırma ile bir örnek oluşturabilirsiniz: temel URL, varsayılan zaman aşımı, ortak başlıklar. Bu, her istekte aynı parametreleri tekrarlamayı önler ve HTTP istemci ayarlarını merkezi olarak yönetmenizi sağlar.

# npm ile kur
npm install axios

# yarn ile kur
yarn add axios

# pnpm ile kur
pnpm add axios

Yapılandırma ile örnek oluşturma

Her API hizmeti için ayrı bir Axios örneği oluşturmanız önerilir. Bu, her çağrıda tekrarlamadan bu örneğin tüm isteklerine uygulanacak bir temel URL, standart başlıklar ve zaman aşımı belirlemenizi sağlar.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axios ile kod örnekleri

İstek örnekleri, Axios'un ana kullanım modellerini gösterir. Tüm örnekler, .then() zincirlerine kıyasla asenkron kodu daha okunabilir hale getiren async/await sözdizimini kullanır.

Parametrelerle GET isteği

Sunucudan veri almak için axios.get yöntemi kullanılır. İstek parametreleri, otomatik olarak sorgu dizesine dönüştürülen params nesnesi aracılığıyla iletilir. Yanıt, data alanında verileri, status'te durumu ve headers'da başlıkları içerir.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Kullanıcılar yüklenirken hata', error);
    throw error;
  }
}

Gövde ile POST isteği

Sunucuya veri göndermek için axios.post kullanılır. İkinci argüman, Axios'un otomatik olarak JSON'a serileştirdiği verileri içeren bir nesnedir. Content-Type varsayılan olarak application/json olarak ayarlanır.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Interceptors

Interceptors, her istek veya yanıt için yürütülen middleware işlevleridir. Yetkilendirme token'ları eklemeye, istekleri günlüğe kaydetmeye ve hataları merkezi olarak yönetmeye olanak tanır. Bir talep interceptor'u, depolamadan alınan bir token ile Authorization başlığını ekler.

// Talep interceptor'u — yetkilendirme token'ı ekler
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Yanıt interceptor'u — 401 hatalarını yönetir
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axios'ta hata yönetimi

Hata yönetimi Axios'ta istisna mekanizmasına dayanır. Fetch'in aksine, Axios HTTP hatalarını (4xx, 5xx) otomatik olarak yakalar ve catch bloğuna iletir. Hata nesnesi, sunucu yanıtı, istek ve yürütme bağlamı hakkında bilgi içerir.

Üç tür hatayı ayırt etmek önemlidir: sunucu yanıt hatası (response), istek hatası (request) ve yapılandırma hatası (config). Birincisi, HTTP çağrısı başarıyla yürütüldüğünde ancak bir hata kodu döndürdüğünde, ikincisi sunucudan yanıt alınamadığında ve üçüncüsü istek yapılandırması geçersiz olduğunda oluşur.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Yanıt hatası', error.response.status);
      } else if (error.request) {
        console.warn('Sunucudan yanıt yok');
      } else {
        console.warn('Yapılandırma hatası');
      }
    }
  }
}

Axios'un Fetch API ile karşılaştırılması

Axios'un yerel Fetch API ile karşılaştırılması, her teknolojinin ne zaman uygun olduğunu anlamaya yardımcı olur. Fetch, kurulum gerektirmeyen, tarayıcıya yerleşik bir API'dir. Axios, ek özelliklere sahip üçüncü taraf bir kütüphanedir. Basit istekler için fetch yeterlidir; interceptors ve merkezi hata yönetimi olan karmaşık uygulamalar için Axios daha kullanışlıdır.

Fetch, HTTP hatalarını (4xx, 5xx) istisna olarak kabul etmez — response.ok'u kontrol etmeniz gerekir. Fetch, JSON almak için iki .then() çağrısı gerektirir: response.json() daha sonra verilerle bir Promise döndürür. Axios bunu otomatik olarak yapar. Fetch, ek polyfill'ler olmadan dosya yükleme ilerlemesini desteklemez. Axios'ta yerleşik onUploadProgress ve onDownloadProgress bulunur.

Node.js'de Fetch, sürüm 18'den itibaren deneysel bir özellik olarak kullanılabilirken, Axios Node.js 10'dan itibaren kararlı bir şekilde çalışır. Eski Node.js sürümlerini destekleyen projeler için seçim açıkça Axios'tan yanadır. Karmaşık istek işleme gerektirmeyen modern tarayıcı projeleri için fetch yeterli olabilir.