Axios Nedir ve Nasıl Kullanılır?

Merhaba, bu makalemde Axios‘tan bahsedeceğim. Axios, client side uygulamalarda HTTP çağrılarının kolayca yapılmasını sağlayan bir javascript kütüphanesidir. Npm veya bower paketi olarak veya CDN üzerinden kullanılabilir.

Günümüzde artık birçok web uygulaması client side olarak yazılıyor ve birçoğu Angular ve React gibi kütüphaneler kullanıyor. Yalnız, bir uygulama veya web sitesini sadece client side olarak yazmak pek de mümkün değildir. Verileri saklamak ve işlemek için bir veritabanına ve doğal olarak server üzerinde çalışacak bir uygulamaya yani bir API’ye ihtiyaç duyulur. Son olarak da bu iki ortamın birbiriyle haberleşmesi gerekir. İşte Axios, bu iki ortamın haberleşmesini sağlar. Eğer daha önce jQuery kullanmışsanız, $.ajax() fonksiyonu da benzer işi yapmaktadır.

Axios’un dahili olarak gelen birçok özelliği bulunmaktadır. Bu özellikler sayesinde birçok kullanıcının tercihi olmaktadır. Özelliklere hızlıca bakacak olursak:

• Özel header değerlerinin eklenebilmesi
• Request ve response interceptor yazılabilmesi
• Promise tabanlı yapıda çalışması
• Response timeout değeri belirtilebilmesi
• Yapılan isteklerin iptal edilebilmesi
• Upload işlemlerinde durum/yüzde bilgisinin raporlanabilmesi
• Eski tarayıcılarda çalışabilmesi
• Otomatik olarak JSON dönüşümü yapabilmesi

Axios’u aşağıdaki komut ile veya herhangi bir CDN sağlayıcısı üzerinden projenize ekleyerek kullanabilirsiniz:

npm install axios

veya

yarn add axios

HTTP çağrısı yapabilmek için Axios’un temel iki yöntemi bulunmaktadır. Bu yöntemlerden ilki yukarıda da bahsettiğim jQuery’nin ajax fonksiyonuna benzemektedir. Bu tarz kullanım için aşağıdaki gibi bir kod yazılabilir:

axios({
    method: "post",
    url: "/login",
    data: {
        username: "kullanici adi",
        password: "parola"
    }
});

İkinci yöntem ise HTTP metod tiplerine özel yazılmış fonksiyonları kullanmaktır. Örnek bir get ve post isteği aşağıdaki gibi yapılabilir:

axios.get("/users");
axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
});

Axios promise tabanlı çalıştığı için çağrı sonucuna .then() veya await ifadeleriyle ulaşabiliriz ve otomatik JSON dönüşümü yapıldığı için cevap olarak gelen obje JSON string değil javascript objesidir.

//then
axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
})
.then( response => {
    console.log(response);
});

//await
const response = await axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
});

Yalnız, iki durumda da unutulmaması gereken senaryo hata yönetimidir. Yukarıdaki iki kullanımda da eğer servis hata fırlatırsa kod akışınız kesilecektir. Dolayısıyla servis hatalarını aşağıdaki gibi yönetmeniz gerekmektedir:

//then
axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
})
.then( response => {
    console.log(response);
}, error => {
    console.log(error);
});

//catch
axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
})
.then( response => {
    console.log(response);
})
.catch( error => {
    console.log(error);
};

//await
try {
    const response = await axios.post("/login", {
        username: "kullanici adi",
        password: "parola"
    });
} catch (error) {
    console.log(error);
}

Dokümantasyona göre response üzerinde aşağıdaki alanlar bulunmaktadır:

axios.get("/users")
.then( response => {
    console.log(response.data); //sunucudan dönen data, js objesi
    console.log(response.status); //HTTP durum kodu
    console.log(response.statusText); //HTTP durum mesajı
    console.log(response.headers); //sunucudan dönen header bilgileri
    console.log(response.config); //istek ile gönderilen konfigürasyon objesi
});

Axios’un bir diğer özelliği default header değerleri belirlenebiliyor olması. Örneğin, login işleminden sonra edinilen token bilgisi genel olarak her request header’ında geçilmelidir. Bu durumda token edinildiği anda aşağıdaki kodu çağırmak yeterlidir:

axios.defaults.headers.common["Authorization"] = token;

Ayrıca eğer istenirse metod bazlı default değer ataması da yapılabilir. Bu durumda common yazan kısma post, get gibi metod isimleri yazılabilir. Örnek:

axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

Axios kullanarak paralel çağrılar da yapılabilir. Tek yapılması gereken, çağrıları .all() metodu içerisine yazmaktır:

axios.all([
    axios.get("/user/1"),
    axios.get("/user/2")
])
.then( responses => {
    console.log(responses[0].data);
    console.log(responses[1].data);
});

Axios’un request ve response’lara otomatik olarak uyguladığı JSON dönüşümünü devre dışı bırakıp özel dönüşüm kodu yazılmak istendiğinde transformRequest ve transformResponse fonksiyonları yazılabilir. Bu fonksiyonlar bir obje içerisine eklenip metodlara üçüncü parametre olarak geçilebilir. Örnek:

axios.post("/login", {
    username: "kullanici adi",
    password: "parola"
}, {
    transformRequest: (data, headers) => {
        //özel dönüşüm kodu
        return data;
    },
    transformResponse: (data) => {
        //özel dönüşüm kodu
        return data;
    }
})
.then( response => {
    console.log(response);
})

Axios’un bahsedeceğim son özelliği request ve response interceptor. Bu özellik sayesinde request gönderiminden hemen önce ve response alındıktan hemen sonra uygulama genelindeki bazı işlemler yapılabilir. Örneğin her response sonrasında otomatik olarak loglama işlemi yapılabilir. Request ve response interceptor tanımlamak için Axios objesi üzerindeki interceptor değeri kullanılır:

// Request interceptor
const requestInterceptor = axios.interceptors.request.use( config => {
    //config üzerinde değişiklik yapılabilir
    return config;
}, error => {
    //error ile bir şeyler yapılabilir
    return Promise.reject(error);
});

const responseInterceptor = axios.interceptors.response.use( response => {
    //response ile bir şeyler yapılabilir
    return response;
}, error => {
    //error ile bir şeyler yapılabilir
    return Promise.reject(error);
});

// Interceptor'ın silinmesi
axios.interceptors.request.eject(requestInterceptor);
axios.interceptors.response.eject(responseInterceptor);

Gürüldüğü gibi Axios birçok konuda kolaylık sağlıyor. Client side uygulamalarda mutlaka kullanılması gereken bir javascript kütpühanesi. Detaylı bilgi için buradaki github sayfasına bakabilirsiniz.

• https://www kemalkefeli com tr/axios-nedir-ve-nasil-kullanilir html (1)