React ve React Native'de Axios Interceptor Kullanımı

Web ve mobil uygulama geliştirme süreçlerinde, API isteklerinde tekrarlayan işlemleri merkezi bir noktada yönetmek büyük bir avantaj sağlar. Bazı kullanıcılar Fetch yapısını kullansalar da Axios kütüphanesi kullanan geliştiriciler de azımsanmayacak kadar fazladır. Axios tek bir noktada yönetme işlemlerini kolaylaştırmak için interceptor özelliğini sunar. Bu blog yazısında, React ve React Native projelerinde Axios'un interceptor mekanizmasını nasıl kullanabileceğinizi, özellikle JWT token'ları header'a eklemek için nasıl yapılandıracağınızı detaylı bir şekilde ele alacağız.

1. Axios Nedir ve Neden Kullanılır?

Axios, HTTP istekleri yapmak için kullanılan popüler bir JavaScript kütüphanesidir. Özellikle şu özellikleriyle öne çıkar:

• Promise tabanlı bir yapıya sahiptir.

• Hem tarayıcıda hem de Node.js ortamında çalışabilir.

• Request ve Response interceptor mekanizmaları sunar.

• Zengin yapılandırma seçenekleri ile özelleştirme imkânı sağlar.

2. Interceptor Nedir?

Interceptor, Axios'un sağladığı bir özellik olup, API istek ve yanıtlarının öncesinde veya sonrasında özel işlemler yapılmasını sağlar.

• Request Interceptor: İstek yapılmadan önce çalışır ve isteğe header gibi özellikler eklemek için kullanılır.

• Response Interceptor: API'den gelen yanıtlara işlem yapmak veya hata yönetimi için kullanılır.

3. Axios Instance ile Merkezi Yapı Oluşturma

Projenizde tüm isteklerde ortak bir yapı kullanmak için Axios instance yaratabilirsiniz. Bu instance, interceptor'ları ve diğer yapılandırmaları merkezi bir yerde tanımlamanızı sağlar.

Axios Instance Tanımlama:

import axios from 'axios';
const api = axios.create({
	baseURL: 'https://api.example.com', // API'nin temel adres
  	timeout: 10000, // Zaman aşımı süresi
)}

4. JWT Token'ı Header'a Eklemek

JWT token'ı API isteklerinde "Authorization" header'ına eklemek yaygın bir senaryodur. Bunun için request interceptor kullanılır. React Native'de token'ı AsyncStorage'dan, React Web'de ise localStorage'dan veya sessionStorage'dan alabilirsiniz.

import AsyncStorage from '@react-native-async-storage/async-storage';

api.interceptors.request.use(
  async (config) => {
    // AsyncStorage'dan token'ı al
    const token = await AsyncStorage.getItem('jwt_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // Hata durumunu yönet
    return Promise.reject(error);
  }
);

React Web için Örnek:

const token = localStorage.getItem('jwt_token');
if (token) {
  config.headers.Authorization = `Bearer ${token}`;
}

5. Yanıt Yönetimi (Response Interceptor)

Yanıt interceptor'ları, API'den gelen verilere veya hatalara müdahale etmek için kullanılır. Örneğin, 401 hata kodu alındığında kullanıcının çıkış yapması gerektiğini belirleyebilirsiniz.

Yanıt Interceptor Tanımlama:

api.interceptors.response.use(
  (response) => {
    // Başarılı yanıtı doğrudan döndür
    return response;
  },
 (error) => {
    // Yetkilendirme hatası (401) durumunu ele al
    if (error.response?.status === 401) {
      console.log('Unauthorized, logging out...');
      // Kullanıcıyı çıkış yaptırma işlemleri

    }
    return Promise.reject(error);
  }
);

6. Tüm Yapıyı Birleştirme

Aşağıda, Axios instance ve interceptor'ların bir arada kullanıldığı tam bir örnek verilmiştir:

Tam Kod:

import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const api = axios.create(
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

// Request Interceptor
api.interceptors.request.use(
  async (config) => {
    const token = await AsyncStorage.getItem('jwt_token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }

);

// Response Interceptor
api.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response?.status === 401) {
      console.log('Unauthorized, logging out...');
    }
    return Promise.reject(error);
  }
);
export default api;

7. Kullanım

Artık Axios instance'ını kullanarak kolayca API istekleri yapabilirsiniz. Token, header'a otomatik olarak eklenecektir.

İstek Örneği:

import api from './api';
const fetchData = async () => {
  try {
    const response = await api.get('/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

Sonuç

Axios'un interceptor özelliği, React ve React Native projelerinde API isteklerini daha verimli bir şekilde yönetmek için güçlü bir araçtır. JWT token'ların header'a eklenmesi, hata yönetimi ve refresh token mekanizmaları gibi işlemleri merkezi bir noktadan kontrol ederek, uygulamanızın kod yapısını daha temiz ve düzenli hale getirebilirsiniz.