Axios Interceptors

Herkese merhabalar. Axios web, ve Node tarafında fazlasıyla tercih edilen bir HTTP istemcisidir. Promise tabanlı olması sebebi ile yönetimi ve kullanması fazlasıyla basit. Ayrıca diğer istemcilerden ayrılan bir çok güçlü özelliğe de sahip.

Bu yazıda interceptorlar ile alakalı konuşacağız.

Interceptor nedir?

Interceptorlar axios ile yapacak olduğunuz HTTP isteklerinde istek başlamadan, yanıt dönülmeden veya istek sonucuna göre isteğinizin bazı özelliklerini değiştirmek veya bağlı işlemleri kurgulamak için kullanılır.

Kısaca isteklerinizi başlamadan veya atmış olduğunuz isteğin cevabı henüz dönülmeden veya dönen cevaba göre araya girerek konfigüre edebilir, farklı işlemleri tetikleyebilirsiniz.

Ufak bir senaryo oluşturacak olur isek. Backend tarafında tüm endpointler her kullancıya OneToOne ile bağlı bir tokenle kullanıcı doğrulaması talep etsin.

Kendimizi doğrulayabilme adına Authorization headerı ile tokenimizi göndermemiz, ve bunun yanında eğer bu token geçerliliğini kaybetmiş ise dönecek olan 401 durumu sonucu kullancıyı tekar token alması için yönlendirmemiz gerekmekte.

import axios from "axios";
import router from "./router";
import store from "./store";

const client = axios.create({
  baseURL: process.env.BACKEND_API_URL || "hardcoded backend app url",
  headers: {
    "Content-Type": "application/json",
  },
});

client.interceptors.request.use(
  (config) => {
    let token = localStorage.getItem("accessToken") || "";
    config.headers["Authorization"] = `Token ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

Oluşturduğumuz axios istemcisi, atacağımız her isteğe başlamadan önce Request interceptor’unda konfigüre edilecek ve localStorage de bulunan tokeni Authorization headerına ekleyip diğer request özelliklerini(headers vs) config olarak geriye dönecek.

Axios’un Promise tabanlı olduğundan bahsetmiştik. Bundan dolayı isteği atarken herhangi bir hata ile karşılaşılması durumunda Promise’i reject’e çekiyoruz.

Böylece isteklerimizin özelliklerini global olarak konfigüre etmiş olduk.

İstek sonuçlarını da konfigüre edecek olursak.

client.interceptors.response.use(
  (response) => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    return response;
  },
  (error) => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    if (error.response.status == 401) {
      localStorage.removeItem("accessToken");
      router.push({ name: "login" });
    }
    return Promise.reject(error);
  }
);

Response interceptoru yine parametre olarak 2 adet callback fonksiyon almakta.

Birincisi response,ikincisi error. Eğer isteğin durum kodu 2** olarak dönmüş ise ilk callback, eğer 2** dışında herhangi bir kod dönmüş ise 2. callback işletilmekte.

Kullancı doğrulanamadığında yani 401 durum kodu döndüğünde tokenı localStorage’den kaldırıyor ve uygulama yönlendircisini giriş ekranına döndürüyoruz. Her durumda Promise’i reject’e çekiyoruz ki dönebilecek farklı bir hata da uygulama yapısını bozmadan yönetilebilsin.

---

Son sözler

axios giderek popülerleşen ve çok kullanışlı özelliklere sahip bir HTTP istemcisi. Eminim ki interceptorlar da işinize mutlaka yarayacaktır.

axios’un resmi dökümantasyonu için şu adres, bu blog yazısı kapsamında yazılmış kodlara ise bu linkten ulaşabilirsiniz. Görüşmek üzere!