Tüm blog yazıları

Axios Nedir?

HTTP isteklerini basitleştiren Axios ile tanışın! Fetch API'nin zorluklarını geride bırakın. Axios, otomatik JSON parse, gelişmiş hata yönetimi ve istek/yanıt denetleyicileri gibi özellikleriyle favori. Kurulumunu ve kullanımını öğrenin.

eminbasbayan7 dk okuma
Axios kütüphanesi logosu ve JavaScript kod örnekleriyle HTTP isteklerinin basitleştirilmesi

XHR'nin karmaşıklığını gördük. Fetch API ile işler düzeldi ama hâlâ manuel JSON parse etmek, hata kontrolü yapmak gibi tekrarlayan işler var. Peki ya tüm bunları otomatik yapan bir araç olsaydı?

İşte Axios tam da bu. HTTP isteklerini mümkün olan en basit hale getiren, geliştiricilerin favori kütüphanesi.

Axios Nedir?

Axios, JavaScript için popüler bir HTTP istemci kütüphanesidir. Hem tarayıcıda hem de Node.js'te çalışır.

Neden Axios?

ÖzellikFetchAxios
JSON otomatik parse❌✅
HTTP hata yakalama❌✅
İstek timeout❌✅
İstek iptaliKarmaşıkKolay
İstek/yanıt interceptor❌✅
Tarayıcı + Node.jsTarayıcıHer ikisi

Kurulum

CDN ile (En Kolay)

HTML dosyanıza ekleyin:

html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

npm ile (Projeler için)

bash
npm install axios
javascript
import axios from 'axios';

İlk Axios İsteği

javascript
axios.get("https://jsonplaceholder.typicode.com/users/1")
    .then(response => {
        console.log(response.data);
    });

Dikkat edin:

  • response.json() yok - Axios otomatik parse eder
  • Veri response.data içinde - direkt kullanıma hazır

Fetch ile Karşılaştırma

Fetch:

javascript
fetch("https://jsonplaceholder.typicode.com/users/1")
    .then(response => response.json())  // Manuel parse
    .then(data => console.log(data));

Axios:

javascript
axios.get("https://jsonplaceholder.typicode.com/users/1")
    .then(response => console.log(response.data));  // Otomatik parse

Bir satır daha kısa ve daha temiz.

Response Nesnesi

Axios'un döndürdüğü response nesnesi:

javascript
axios.get("https://jsonplaceholder.typicode.com/users/1")
    .then(response => {
        console.log(response.data);       // Yanıt verisi (JSON parse edilmiş)
        console.log(response.status);     // 200
        console.log(response.statusText); // "OK"
        console.log(response.headers);    // Yanıt başlıkları
        console.log(response.config);     // İstek konfigürasyonu
    });

En önemlisi response.data - istediğiniz veri burada, kullanıma hazır.

async/await ile Kullanım

javascript
async function kullaniciGetir(id) {
    try {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);

        console.log("İsim:", response.data.name);
        console.log("Email:", response.data.email);
        console.log("Şehir:", response.data.address.city);

    } catch (error) {
        console.log("Hata:", error.message);
    }
}

kullaniciGetir(1);

Çıktı:

metin
İsim: Leanne Graham
Email: Sincere@april.biz
Şehir: Gwenborough

Hata Yönetimi

Axios'un en büyük avantajlarından biri: HTTP hataları otomatik olarak catch'e düşer!

Fetch'te (Manuel Kontrol Gerekli)

javascript
fetch(url)
    .then(response => {
        if (!response.ok) {  // Manuel kontrol
            throw new Error(`HTTP Error: ${response.status}`);
        }
        return response.json();
    })
    .catch(error => console.log(error));

Axios'ta (Otomatik)

javascript
axios.get(url)
    .then(response => console.log(response.data))
    .catch(error => console.log(error));  // 404, 500 vb. buraya düşer

Detaylı Hata Bilgisi

javascript
async function veriGetir() {
    try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/users/999");
        console.log(response.data);
    } catch (error) {
        if (error.response) {
            // Sunucu yanıt verdi ama hata kodu döndü (4xx, 5xx)
            console.log("Status:", error.response.status);
            console.log("Data:", error.response.data);
        } else if (error.request) {
            // İstek gönderildi ama yanıt alınamadı
            console.log("Sunucuya ulaşılamadı");
        } else {
            // İstek oluşturulurken hata oluştu
            console.log("Hata:", error.message);
        }
    }
}

HTTP Metodları

GET - Veri Alma

javascript
// Basit
axios.get("/api/kullanicilar");

// Query string ile
axios.get("/api/kullanicilar", {
    params: {
        sayfa: 2,
        limit: 10,
        siralama: "isim"
    }
});
// URL: /api/kullanicilar?sayfa=2&limit=10&siralama=isim

POST - Veri Oluşturma

javascript
axios.post("/api/kullanicilar", {
    isim: "Ahmet Yılmaz",
    email: "ahmet@mail.com",
    yas: 28
});

İkinci parametre direkt veri objesi - JSON.stringify() gerekmiyor!

PUT - Tam Güncelleme

javascript
axios.put("/api/kullanicilar/5", {
    isim: "Ahmet Yılmaz",
    email: "ahmet.yilmaz@mail.com",
    yas: 29
});

PATCH - Kısmi Güncelleme

javascript
axios.patch("/api/kullanicilar/5", {
    email: "yeni.email@mail.com"
});

DELETE - Silme

javascript
axios.delete("/api/kullanicilar/5");

Header Ekleme

Tek İstek için

javascript
axios.get("https://icanhazdadjoke.com/", {
    headers: {
        "Accept": "application/json"
    }
})
.then(response => {
    console.log(response.data.joke);
});

POST ile Header

javascript
axios.post("/api/veriler",
    {
        baslik: "Yeni Veri",
        icerik: "İçerik burada"
    },
    {
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer token123"
        }
    }
);

Config Objesi Ayırma (Daha Temiz)

javascript
const config = {
    headers: {
        "Accept": "application/json",
        "Authorization": "Bearer mytoken123"
    }
};

axios.get("/api/profil", config);
axios.get("/api/siparisler", config);

Pratik Örnek: Şaka Uygulaması

html
<!DOCTYPE html>
<html>
<head>
    <title>Günlük Şaka</title>
</head>
<body>
    <h1>Rastgele Şaka</h1>
    <button id="sakaBtn">Yeni Şaka Getir</button>
    <p id="sakaText">Butona tıklayın...</p>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const btn = document.querySelector("#sakaBtn");
        const text = document.querySelector("#sakaText");

        async function sakaGetir() {
            try {
                text.textContent = "Yükleniyor...";

                const response = await axios.get("https://icanhazdadjoke.com/", {
                    headers: { "Accept": "application/json" }
                });

                text.textContent = response.data.joke;

            } catch (error) {
                text.textContent = "Şaka yüklenemedi. Tekrar deneyin.";
            }
        }

        btn.addEventListener("click", sakaGetir);
    </script>
</body>
</html>

Pratik Örnek: Kullanıcı Arama

javascript
const aramaInput = document.querySelector("#arama");
const sonuclarDiv = document.querySelector("#sonuclar");

async function kullaniciAra(kelime) {
    try {
        const response = await axios.get("https://jsonplaceholder.typicode.com/users");

        const eslesen = response.data.filter(user =>
            user.name.toLowerCase().includes(kelime.toLowerCase())
        );

        sonuclarDiv.innerHTML = eslesen.map(user => `
            <div class="kullanici-karti">
                <h3>${user.name}</h3>
                <p>${user.email}</p>
                <p>${user.address.city}</p>
            </div>
        `).join("");

    } catch (error) {
        sonuclarDiv.innerHTML = "<p>Arama yapılamadı.</p>";
    }
}

aramaInput.addEventListener("input", (e) => {
    if (e.target.value.length >= 2) {
        kullaniciAra(e.target.value);
    }
});

Axios Instance (Örnek Oluşturma)

Aynı ayarları tekrar tekrar yazmamak için özel bir Axios instance oluşturabilirsiniz:

javascript
const api = axios.create({
    baseURL: "https://jsonplaceholder.typicode.com",
    timeout: 5000,
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer token123"
    }
});

// Artık kısa URL'ler kullanabilirsiniz
api.get("/users");           // https://jsonplaceholder.typicode.com/users
api.get("/posts");           // https://jsonplaceholder.typicode.com/posts
api.post("/users", data);    // POST isteği

Interceptors (Yakalayıcılar)

Her istek veya yanıtı otomatik işlemek için:

İstek Interceptor

javascript
axios.interceptors.request.use(config => {
    console.log("İstek gönderiliyor:", config.url);

    // Her isteğe token ekle
    config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;

    return config;
});

Yanıt Interceptor

javascript
axios.interceptors.response.use(
    response => {
        console.log("Yanıt alındı:", response.status);
        return response;
    },
    error => {
        if (error.response.status === 401) {
            // Token geçersiz - login sayfasına yönlendir
            window.location.href = "/login";
        }
        return Promise.reject(error);
    }
);

Timeout (Zaman Aşımı)

javascript
axios.get("/api/yavas-islem", {
    timeout: 5000  // 5 saniye
})
.catch(error => {
    if (error.code === "ECONNABORTED") {
        console.log("İstek zaman aşımına uğradı!");
    }
});

İstek İptali

javascript
const controller = new AbortController();

axios.get("/api/buyuk-veri", {
    signal: controller.signal
})
.catch(error => {
    if (axios.isCancel(error)) {
        console.log("İstek iptal edildi");
    }
});

// İsteği iptal et
controller.abort();

Paralel İstekler

javascript
async function tumVerileriGetir() {
    try {
        const [kullanicilar, postlar, yorumlar] = await Promise.all([
            axios.get("https://jsonplaceholder.typicode.com/users"),
            axios.get("https://jsonplaceholder.typicode.com/posts"),
            axios.get("https://jsonplaceholder.typicode.com/comments")
        ]);

        console.log("Kullanıcılar:", kullanicilar.data.length);
        console.log("Postlar:", postlar.data.length);
        console.log("Yorumlar:", yorumlar.data.length);

    } catch (error) {
        console.log("Hata:", error.message);
    }
}

XHR vs Fetch vs Axios

ÖzellikXHRFetchAxios
Promise❌✅✅
async/await❌✅✅
Otomatik JSON❌❌✅
HTTP hata yakalama❌❌✅
Timeout✅❌✅
Interceptors❌❌✅
İstek iptaliKolayKarmaşıkKolay
Tarayıcı + Node❌❌✅
KurulumGereksizGereksizGerekli

Ne Zaman Hangisini Kullanmalı?

Fetch Kullan:

  • Basit, tek seferlik istekler
  • Ekstra kütüphane eklemek istemiyorsanız
  • Bundle boyutunu küçük tutmak istiyorsanız

Axios Kullan:

  • Büyük projelerde
  • Çok sayıda API isteği yapıyorsanız
  • Interceptor, timeout gibi özellikler gerekiyorsa
  • Hem frontend hem backend'de aynı syntax istiyorsanız

Özet

javascript
// GET
const response = await axios.get(url);
console.log(response.data);

// GET with params
await axios.get(url, { params: { page: 1 } });

// POST
await axios.post(url, { name: "Ali" });

// Headers
await axios.get(url, { headers: { "Authorization": "Bearer token" } });

// Hata yakalama
try {
    await axios.get(url);
} catch (error) {
    console.log(error.response.status);
}

Sonuç

Axios, HTTP isteklerini kolaylaştıran güçlü bir kütüphane. Otomatik JSON parse, yerleşik hata yönetimi, interceptor'lar ve daha fazlası ile geliştirici deneyimini önemli ölçüde iyileştirir.

Artık AJAX, API'ler ve JavaScript ile HTTP istekleri yapma konusunda sağlam bir temele sahipsiniz. Bu bilgilerle gerçek dünya uygulamaları geliştirmeye hazırsınız!

İlgili yazılar

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele