Ön Hazırlık ve Ortam Kurulumu

Projeye başlamadan önce bilgisayarınızda Node.js'in güncel bir sürümünün (en az 18.x veya 20.x) yüklü olduğundan emin olmalısınız. React projenizi oluşturmak için Vite gibi modern araçları kullanmanızı öneriyoruz. Axios kütüphanesini projenize dahil etmek için terminalinizi açın ve proje dizininizde aşağıdaki komutu çalıştırın:

npm install axios

Bu komut, Axios kütüphanesini node_modules klasörünüze indirir ve package.json dosyanıza bağımlılık olarak ekler. Axios, Promise tabanlı bir HTTP istemcisi olduğu için asenkron (eşzamansız) işlemleri yönetmek oldukça pratiktir.

Axios ile Temel HTTP GET İsteği Gönderme

Bir API'den veri çekmek için en sık kullanılan yöntem GET isteğidir. React bileşenlerinde bu işlemi genellikle useEffect kancası (hook) içerisinde gerçekleştiririz. Bu sayede bileşen ilk kez ekrana geldiğinde (mount olduğunda) verinin çekilmesini sağlarız.

import axios from 'axios';
import { useEffect, useState } from 'react';

function VeriListesi() {
  const [veriler, setVeriler] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setVeriler(response.data);
      })
      .catch(error => {
        console.error("Veri çekme hatası:", error);
      });
  }, []);

  return (
    

      
Gönderiler
      

        {veriler.map(item => 
{item.title}
)}
      
    
  );
}

Yukarıdaki kod örneğinde, useEffect boş bir bağımlılık dizisi [] ile kullanılmıştır. Bu, isteğin yalnızca bileşen ilk kez yüklendiğinde bir kez çalışmasını sağlar. response.data alanı, sunucudan dönen JSON verisini içerir.

Asenkron İşlemlerde Async/Await Kullanımı

Modern JavaScript standartlarında .then() zincirleri yerine async/await yapısını kullanmak, kodun okunabilirliğini artırır ve hata yönetimini kolaylaştırır. Profesyonel projelerde bu yaklaşım standart olarak kabul edilir.

const veriCek = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response.data);
  } catch (error) {
    console.error("İstek başarısız:", error.message);
  }
};

try-catch bloğu, ağ hatalarını veya sunucu tarafındaki 404/500 gibi hata kodlarını yakalamak için kritik öneme sahiptir. Hata durumunda uygulamanızın çökmesini engellemek için bu blokları mutlaka kullanmalısınız.

Axios İsteklerini Yapılandırma ve Özelleştirme

Büyük ölçekli projelerde her istek için tam URL yazmak yerine, Axios'un create fonksiyonu ile bir "instance" (örnek) oluşturmak en iyi pratiklerden biridir. Bu sayede temel URL (base URL) ve ortak başlıkları (headers) tek bir yerden yönetebilirsiniz.

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

// Kullanımı:
api.get('/posts').then(res => console.log(res.data));

Bu yöntem, API adresiniz değiştiğinde veya kimlik doğrulama (token) eklemeniz gerektiğinde tüm uygulama genelinde değişiklik yapmanızı kolaylaştırır.

Veri Çekme Yöntemlerinin Karşılaştırılması

Güvenlik ve Hata Yönetimi

Dikkat: API anahtarlarınızı (API keys) veya hassas verilerinizi asla istemci tarafındaki kodların içerisinde açıkça (hard-coded) bırakmayın. Bu tür veriler için ortam değişkenlerini (.env dosyaları) kullanın ve hassas işlemlerinizi sunucu tarafında gerçekleştirin.

API'den veri çekerken oluşabilecek XSS (Cross-Site Scripting) saldırılarına karşı, sunucudan gelen verileri doğrudan HTML olarak render etmeyin. React'in sunduğu otomatik kaçış (escaping) mekanizması bu konuda sizi korur, ancak dangerouslySetInnerHTML kullanırken çok dikkatli olunmalıdır.

Sıkça Sorulan Sorular

Axios ile interceptor nedir?

Interceptor, istekler sunucuya gitmeden veya yanıtlar bileşene ulaşmadan önce araya girip işlem yapmanızı sağlayan bir mekanizmadır. Örneğin, her isteğe otomatik olarak "Authorization" başlığı eklemek için kullanılır.

Neden useEffect içinde axios kullanmalıyım?

React bileşenleri render edildiğinde yan etkilerin (side effects) yönetilmesi gerekir. useEffect, verinin sadece ihtiyaç duyulduğunda çekilmesini sağlar ve gereksiz ağ trafiğini önler.

Axios isteği iptal edilebilir mi?

Evet, AbortController kullanarak devam eden bir isteği iptal edebilirsiniz. Bu, kullanıcı sayfadan ayrıldığında veya arama çubuğunda hızlı yazım yapıldığında kaynak tasarrufu sağlar.

Hata kodlarını nasıl yakalarım?

Axios, 2xx dışındaki tüm HTTP durum kodlarını hata olarak değerlendirir. error.response nesnesini kontrol ederek sunucudan dönen hata mesajlarını ve kodlarını detaylı inceleyebilirsiniz.

Axios ile POST isteği nasıl atılır?

axios.post('/endpoint', { veri: 'değer' }) şeklinde veri gönderebilirsiniz. İkinci parametre olarak gönderdiğiniz nesne, otomatik olarak JSON formatına dönüştürülür.

Axios İsteklerinde Performans Optimizasyonu ve Önbellekleme

Büyük ölçekli React uygulamalarında, her bileşen render edildiğinde aynı API isteğini tekrarlamak hem sunucu maliyetlerini artırır hem de kullanıcı deneyimini olumsuz etkiler. Axios isteklerini optimize etmek için stratejik yaklaşımlar benimsemek kritik öneme sahiptir.

İstekleri Azaltmak İçin Stratejiler

• Debouncing: Özellikle arama çubukları gibi kullanıcı girdisine bağlı isteklerde, her tuş vuruşunda istek atmak yerine kullanıcının yazmayı bırakmasını bekleyin.
• Memoization: useMemo ve useCallback hook'larını kullanarak, verinin değişmediği durumlarda gereksiz API çağrılarının önüne geçin.
• Önbellekleme Katmanı: Axios ile gelen verileri localStorage veya sessionStorage üzerinde tutarak, ağ trafiğini minimuma indirin.

// Basit bir önbellekleme mantığı
const fetchData = async (url) => {
  const cachedData = localStorage.getItem(url);
  if (cachedData) return JSON.parse(cachedData);

  const response = await axios.get(url);
  localStorage.setItem(url, JSON.stringify(response.data));
  return response.data;
};

Axios İsteklerini Test Etme ve Mocklama

API uç noktalarınız henüz hazır olmadığında veya birim testleri (unit tests) yazarken gerçek bir sunucuya bağımlı kalmak istemezsiniz. Bu noktada axios-mock-adapter kütüphanesi, geliştirme sürecini hızlandırmak için mükemmel bir çözümdür.

Axios Mock Adapter ile Test Senaryosu

Gerçek HTTP isteklerini yakalayarak, ağa çıkmadan belirlediğiniz sahte verileri döndürebilirsiniz. Bu yöntem, hata durumlarını (404, 500 gibi) simüle etmek için de oldukça pratiktir.

import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

const mock = new MockAdapter(axios);

// 200 OK yanıtını simüle et
mock.onGet('/users').reply(200, {
  users: [{ id: 1, name: 'Ahmet' }]
});

// 500 Hata durumunu simüle et
mock.onGet('/error').reply(500);

// Test dosyanızda artık axios.get('/users') 
// gerçek sunucuya gitmeden yukarıdaki veriyi döner.

İpucu: Testlerinizi yazarken jest ile birlikte kullanarak, API yanıtlarının bileşenleriniz tarafından doğru işlenip işlenmediğini otomatik olarak doğrulayabilirsiniz.

İleri Seviye: Axios ile İptal Edilebilir İsteklerin Yönetimi

Kullanıcı bir sayfadan diğerine hızla geçtiğinde, arka planda devam eden eski isteklerin tamamlanması kaynak israfına yol açar. AbortController API'sini Axios ile entegre ederek bu durumu yönetmek, uygulamanızın performansını doğrudan iyileştirir.

useEffect(() => {
  const controller = new AbortController();

  axios.get('/api/data', { signal: controller.signal })
    .then(res => setData(res.data))
    .catch(err => {
      if (axios.isCancel(err)) {
        console.log('İstek iptal edildi:', err.message);
      }
    });

  return () => controller.abort(); // Bileşen kapandığında isteği iptal et
}, []);

Sonuç

React ile Axios kullanarak REST API veri çekme işlemi, modern web geliştirmenin temel taşlarından biridir. Bu rehberde, basit bir GET isteğinden, profesyonel bir API yapılandırmasına kadar olan süreci inceledik. Bir sonraki adım olarak, verilerinizi yönetmek için React Query (TanStack Query) gibi daha gelişmiş kütüphaneleri inceleyebilir, önbellekleme ve arka plan güncellemeleri hakkında bilgi edinebilirsiniz. Kod yazarken her zaman temiz, modüler ve güvenli bir yapı kurmaya özen gösterin.

Sorumluluk Reddi: Bu makalede yer alan kod örnekleri eğitim amaçlıdır. Üretim ortamına geçmeden önce API uç noktalarınızın güvenliğini, CORS ayarlarını ve veri doğrulama süreçlerini mutlaka gözden geçirin. Yazılım güvenliği, sürekli güncellenmesi gereken bir süreçtir.