Vue&Axios İle Get&Post Metodları

Merhabalar, bu yazımda sizlere vue projelerinizde axios ile get&post metodlarını nasıl kullanacağınızdan kısaca bahsetmeye çalışacağım. Umarım sizler için faydalı bir içerik olur. Keyifli okumalar..

Öncelikle axios nedir kısaca bundan bahsedelim. Axios, javaScript’te istemciye istekleri iletmek için yardımcı bir kütüphanedir. Tarayıcı ve Node.js ortamlarda çalışabilen söz tabanlı bir HTTP istemcisidir. CRUD (CREATE, READ,UPDATE,DELETE) işlemlerini kolaylaştırır. Düz javaScript, Vue veya React gibi diller ile kullanılabilir.

Vue’nun tanımı ve nasıl uygulama geliştirmeye başlanabileceği ile ilgili yazıma göz atabilirsiniz.. :)

Axios’un avantajlarına değinecek olursak;

• Özel header değerleri ekleyebilme,
• Kolaylaştırılmış hata işleme,
• Eski tarayacıları destekleme,
• Response timeout değeri atayabilme,
• Otomatik olarak JSON dönüşümü yapabilmesi

gibi avantajları bulunmaktadır.

Vue projenizi oluşturken gerekli araçlar içerisinde axios’u seçtiyseniz tüm dosyalar olması gerektiği gibi otomatik olarak projenize eklenecektir. Eğer seçmediyseniz sonrasında Axios’u projelerinize eklemek için ;

~$ npm install axios

veya

~$ yarn add axios

kullanabilirsiniz.

Daha sonra axios’u kullanabilmek için .quasar.conf.js içerisinde boot tagı altına axios’u eklememiz gerekli. Ayrıca projemizin /src dizini altındaki boot klasörümüz içerisine de axios.js dosyamızı eklememiz gerekmektedir. axios.js dosyamız içerisinde projemizde global olarak kullanacağımız baseUrl’imiz aşağıdaki örnekte gösterildiği tanımlanmalıdır.

import axios from 'axios'
const API_BASE_URL = process.env["VUE_APP_API_BASE_URL"];
export default async ({ Vue }){
    Vue.prototype.$axios = axios.create({
      baseURL: API_BASE_URL
    
    });
};

Buraya kadar bir sorun ile karşılaşmadıysanız projemizde kullanmak üzere axios hazır demektir. Axios ile HTTP isteklerinde bulunmak için bazı metodlar kullanılır. Bugün bunlardan iki ve yaygın olarak kullanılan get&post metodlarını örneklendireceğim sizler için. O halde post metodumuz ile başlayalım.

Post Metodu;

Post veri göndermek için kullanılan metodtur.

this.$axios.post('/api_url/' + this.ID(eğer gerekliyse), {
              FirstName: this.firstName,
              LastName: this.lastName,
              Message: this.message
            })
              .then(resp => {
                if (resp.data.Success) {
                  this.$router.push({
                    path: '/homepage'
                  })
                } else {
                  showAxiosError(resp)  
                }
              })
              .catch(err => {
                catchAxiosError(err)   
              })

Örneği kısaca açıklayacak olursak;

this.$router.push({
                    path: '/homepage'
                  })

bu kısım veri gönderildikten sonra belirli bir sayfaya yönlendirilmek istiyorsak kullanılır.

showAxiosError(resp)

bu kısım veri gönderiminden dönen cevap başarısız olduğu zaman bu mesaj gösterilir.

catchAxiosError(err)

bu kısımda ise veri gönderilirken bir hata yakalandığında gösterilen mesaj yer alır.

Örnekte olduğu gibi sizlerde göndermek istediğiniz verileri post metodu kullanarak bu şekilde gönderebilirsiniz.

Get Metodu;

Get verileri apiden çekmek için kullanılan metodtur.

      this.UsrsList = []
      this.$axios.get('/api_url/' + this.userID)
        .then(res => {
          if (res.data.Success) {
            this.UsrsList = res.data.Data.Usrs
          } else {
            if (res.status === 500) {
              this.$q.notify({
                color: 'negative',
                position: 'top',
                message: 'Sunucu bağlantısı başarısız.',
                icon: 'close'
              })
            } else {
              showAxiosError(res)
            }
          }
        })
        .catch(err => {
          catchAxiosError(err)
        })

Örneği açıklayacak olursak; örnekte apiden çekmek istediğimiz bir kullanıcı listemiz var bunun için öncelikle boş bir liste tanımlıyoruz ( this.UsrsList = [] ). Daha sonra apiden çekmek istediğimiz veri için bir özellik belirtiyoruz get metodumuz içerisinde ( this.userID ). Daha sonra apiden bize ilgili userID’ye ait bir kullanıcı listesi dönüyor bunu da daha önceden boş olarak tanımladığımız UsrsList’imize atıyoruz ( this.UsrsList = res.data.Data.Usrs ). Eğer bize cevap başarılı dönmez ise HTTP status kontorolü yapabiliriz hatayı anlayabilmek için burada ben 500 hatası durumunu ele aldım. Sunucudan bize 500 hatası döndüyse ilgili if döngüsü içerisine bir uyarı bildirimi tanımladım. Buradaki;

• color bildirimin rengini ifade ediyor (negative: kırmızı),
• position sayfa içerisinde nerede bu bildirim gösterilmek isteniyorsa bunu belirtiyor ( top: yukarıda ),
• message bu bildirim ile yayınlamak istediğimiz mesajı içermeli,
• icon ise bildirim de gösterilmesini istediğimiz iconu ifade etmektedir ( close: X ).

Örnekte olduğu gibi sizlerde apinizden çekmek istediğiniz verileri get metodu kullanarak bu şekilde alabilirsiniz.

Sizlere basit örnekler ile kısaca get ve post metodlarının nasıl kullanılabileceğini anlattım umarım keyif almışsınızdır. :)

Görüş, öneri ve sorularınız için mail atabilirsiniz..:)