Axios Nedir? Modern Uygulamalar için Pratik HTTP İstemcisi

Axios Nedir?

Promise tabanlı, hem tarayıcı hem Node.js ortamlarında çalışan bir HTTP istemcisidir. fetch ile karşılaştırıldığında otomatik JSON parse, GET/POST/PUT/DELETE gibi kısayollar ve daha güçlü bir hata yönetimi sunar. Modern uygulamaların API katmanı için en yaygın seçimlerdendir.

• Promise tabanlı — async/await uyumlu
• Tarayıcı + Node.js'te tek API
• Otomatik JSON dönüşümü
• REST API'lerle iyi çalışır

Neden Axios Kullanmalı?

fetch standart, ancak büyüyen projelerde tekrar eden konfigürasyon ihtiyacı doğar. Axios bu konfigürasyonu instance ve interceptor üzerinden merkezîleştirir.

• Daha temiz syntax — kısa ve okunaklı
• Otomatik JSON parse
• Request/response interceptor'ları
• Built-in timeout yönetimi
• REST API'lerle harika uyum

Kurulum

Tek komut ile projenize ekleyebilirsiniz; runtime bağımlılığı olarak kurulur.

npm install axios

Temel GET İsteği

axios.get tek bir Promise döndürür; response.data alanı doğrudan parse edilmiş veriyi içerir.

import axios from "axios";

const fetchUsers = async () => {
  const res = await axios.get("/api/users");
  return res.data;
};

POST İsteği

İkinci parametre body'dir; Axios objeyi otomatik JSON'a çevirir ve uygun Content-Type başlığını ekler.

await axios.post("/api/users", {
  name: "Ada",
  email: "ada@dev.com",
});

TypeScript ile GET

Axios generic tip alabilir. Böylece response.data alanı any yerine beklediğiniz model olarak gelir ve component tarafında autocomplete/type-safety kazanırsınız.

import axios from "axios";

type User = {
  id: string;
  name: string;
  email: string;
};

export async function getUsers() {
  const res = await axios.get<User[]>("/api/users");
  return res.data;
}

const users = await getUsers();
users[0].email; // string

TypeScript ile POST

Request body ve response modelini ayrı tipleyin. Özellikle form, auth ve create/update akışlarında hatalı alan adlarını erken yakalamak için çok değerlidir.

import { api } from "@/lib/api";

type CreateUserInput = {
  name: string;
  email: string;
};

type User = CreateUserInput & {
  id: string;
};

export async function createUser(input: CreateUserInput) {
  const res = await api.post<User>("/users", input);
  return res.data;
}

await createUser({
  name: "Ada",
  email: "ada@dev.com",
});

Axios Instance (ÖNEMLİ)

Tekrar eden ayarları bir instance'a toplayın: baseURL, timeout, ortak başlıklar. Tüm uygulamadan aynı instance'ı kullanmak yapılandırma karmaşasını ortadan kaldırır.

import axios from "axios";

export const api = axios.create({
  baseURL: "https://example.com/api",
  timeout: 5000,
  headers: { Accept: "application/json" },
});

api.get("/users");

Tipli API Katmanı

Projede raw axios çağrılarını component içine yaymak yerine küçük, tipli fonksiyonlar yazın. Bu yapı React Query, Zustand veya server actions ile daha rahat birleşir.

import { api } from "@/lib/api";

type ApiResponse<T> = {
  data: T;
  message?: string;
};

type User = {
  id: string;
  name: string;
  role: "admin" | "editor" | "viewer";
};

export async function getUser(id: string) {
  const res = await api.get<ApiResponse<User>>(`/users/${id}`);
  return res.data.data;
}

Interceptor'lar

İstek/yanıt akışına global olarak müdahale etmek için interceptor kullanılır. Token eklemek, hataları merkezî yakalamak veya logging yapmak için idealdir.

api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(error);
    return Promise.reject(error);
  }
);

Hata Yönetimi

fetch'ten farklı olarak Axios, 4xx/5xx kodlarında otomatik olarak Promise'ı reject eder. try/catch ile yakalayıp error.response üzerinden detaylara erişirsiniz.

type ApiError = {
  message: string;
  code?: string;
};

try {
  const res = await api.get("/users");
} catch (err) {
  if (axios.isAxiosError<ApiError>(err)) {
    console.log(err.response?.status, err.response?.data);
  }
}

Request Config

Tek bir istek için ayarları override edebilirsiniz: headers, timeout, params, withCredentials gibi alanlar config objesinde geçilir.

await api.get("/users", {
  headers: { "X-Trace-Id": "abc" },
  timeout: 2000,
  withCredentials: true,
});

Query Params

params alanı objeyi alır ve URL'ye ?key=value formatında ekler. Karmaşık nesneler için özel paramsSerializer da kullanılabilir.

await api.get("/posts", {
  params: { page: 1, limit: 10 },
});
// → /posts?page=1&limit=10

Kullanım Alanları

Axios'un tipik kullanım senaryoları:

• REST API tüketimi
• Authentication akışları (token interceptor)
• TypeScript ile tipli API servisleri
• Modern frontend frameworkleriyle
• React Query gibi kütüphanelerle birlikte

Özet

Axios; HTTP isteklerini sadeleştiren, güçlü ve esnek bir kütüphanedir. fetch'e göre temizleyici syntax, daha güvenilir hata yönetimi ve geniş ölçeklenebilirlik sunar. Küçük scriptlerden enterprise uygulamalara kadar her ölçekte çalışır ve modern JavaScript ekosisteminin go-to HTTP istemcisidir.