Axios Nasıl Kullanılır

Selam. Bu yazı Axios Nasıl Kullanılır sorusunun cevabını arayacağız. Bir önceki yazım JWT hakkında bilgi içermekteydi.

 

Axios Nedir?

Aslında axios nasıl kullanılırdan önce ne olduğuna bakalım. Arkadaşlar axios promise tabanlı olarak yayınlanmış, tarayıcı ve node.js tarafında çalışabilir bir HTTP client.

Github Sayfası Burada: https://github.com/axios/axios

Kevser‘e bir ajax request görseli atmıştım. O da axios kullansan daha iyi olur demişti. Biraz bakınayım dedim temel olarak requestin nasıl yapılabileceğini görelim.

Avantajları Neler?

Benim gördüğüm, fetch metodunda olmayan avantajı cancellable olması yani abort mekanizması bulunmakta. Bu avantaj çünkü henüz fetch standartlarını tartışan abiler bir karara varabilmiş değiller. Yapılamaz, imkansız gibi olaydan çok nasıl yapılması gerektiği üzerine kafa yormaktalar sanırım.

Bu arada yoktan bir request açmıyor sonuçta temel aldığı bir yer var. XMLHttpRequest nesnesini kullanarak bağlantıları yapıyorsunuz. Promise tabanlı çalışıyor bunun kimisine göre avantaj kimisine göre de dezavantaj olduğunu belirtmem gerekir.

Son olarak da node tarafında http requestleri ile kullanıldığını söyleyeyim.

Dezavantajları Neler?

Her güzelin bir kusuru vardır derler ya bu da öyle. Kullanışlı, beğeni sayısı bir hayli fazla ve cidden aptalın bile anlayacağı cinsten. Peki kusuru ne? Promise şu anda IE 8+ sürümlerde kullanıldığını belirtmişler. Yani ES6 ile gelen promise tabanına sahip. Bu yüzden daha düşük browserlarda çalışmayacak. İsteyen polyfill çözümü de var.

Her şey promise bu yine kimisi için hoş bir durum değil yani dezavantaj olabilir bir bakıma.

Axios Nasıl Kullanılır

Geldik en önemli kısma. İyi hoş da bu kütüphane nasıl kullanılıyor? Öncelikle kurulumu gerçekleştirmek gerekiyor. Github dokümanına bakarak bower ile kurmayın şu anda bower kullanımı bower tarafından da önerilmiyor. O yüzden npm ya da yarn kullanmak daha iyidir. Bunlar dışında CDN destekli de yapabiliyorsunuz.

NPM ile Kurulum

npm install axios

Yarn ile Kurulum

yarn add axios

CDN Destekli

Aşağıdaki script kodunu uygun bir noktaya koyarsınız işte.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Kurulum bittikten sonra eğer CDN kullanmıyorsanız ve parcel gibi bir araçla çalışıyorsanız import ederek kullanabilirsiniz:

import axios from "./node_modules/axios"

Şu an ben böyle kullanıyorum. Requestlerin oluşturulmasına geldi sıra.

Get Request

İki yöntemle get requesti oluşturabilirsiniz. Birisi fonksiyonel olarak yapılabilmekte. Fonksiyonel yapı temelde iki parametreden oluşmakta. İlk parametre isteğin yapılacağı url, ikinci parametre ise alt nesnelerle birlikte header bilgisinin yer aldığı parametre olmakta.

const url = "https://httpbin.org/get"

axios.get(url, {
        params: {
            name: 'Ali'
        }
    }).then(obj => {
        console.log(obj.data);
    })

Bu kısımda params nesnesinin aldığı alt nesneler query stringleri oluşturuyor. Bu ikinci parametre. Yukarıda yer alan örnekte bize şu url çıkmakta:

https://httpbin.org/get?name=Ali

Tabi dönen değer then metodu ile çözümlendikten sonra verinin de bir noktada tutulması gerekiyor. Bunu data nesnesine atamış yapımcılar. Bir diğer yöntem ise metod kullanmadan direkt configin basıldığı contructor yardımıyla oluyor.

axios({
        method: 'get',
        url: 'https://httpbin.org/get',
        params: {
            name: 'Ali',
        }
    }).then(obj => {
        console.log(obj.data);
    })

Post Request

Aslında bu yöntem yukarıdaki yöntem ile aynı durumda. Sadece get işlemi yapıyorsanız params, post işlemi yapıyorsanız data göndermeniz gerekiyor. Kaldı ki fetch metodu da bu tip bir kullanımla ayakta durmakta. İki yöntemin de kullanımına bakalım:

const url = "https://httpbin.org/post"

axios.post(url, {
        data: {
            name: 'Ali'
        }
    }).then(obj => {
        console.log(obj.data);
    })

Diğer Yöntem

axios({
        method: 'post',
        url: 'https://httpbin.org/post',
        data: {
            name: 'Ali',
        }
    }).then(obj => {
        console.log(obj.data);
    })

Eşzamanlı Çoklu Request Oluşturma

Axios ile dilerseniz concurrent yani eşzamanlı istekler oluşturabilirsiniz. İki adet request oluşturan metodunuz olduğunu düşünün. Bu işlemi şöyle yapabilirsiniz:

const getli = () => {
    axios.get('https://httpbin.org/get')
}

const postlu = () => {
    axios.post('https://httpbin.org/post')
}

axios.all([getli(), postlu()])
    .then(axios.spread((getliResp, postluResp) => {
        console.log('Getli', getliResp);
        console.log('Postlu', postluResp);
    }))

Diğer bilgileri de yazmak isterdim ama bunun için bir hayli uzun bir yazı olması gerekiyor. Dilerseniz resmi dokümana yani readme.md dosyasına github uzerinden bakabilirsiniz.

Okuduğunuz için teşekkür ederim. Sorularınızı bekliyor olacağım 🙂