Cara Menggunakan Axios di Vue CLI

Sebagai contoh kasus, saya menggunakan aplikasi vue cli sebagai frontend dan menggunakan laravel sebagai backend dan membuat permintaan http menggunakan axios.

Kita hanya perlu menginstall modul atau depedensi axios untuk memembuat permintaan ke backend api lalu mengimport modul axios tersebut untuk menggunakannya.

Mari kita coba menggunakannya. Kita mulai dari instalasi axios pada frontend (vue).

#npm
npm install axios

#yarn
yarn add axios

#bower
bower install axios

Cara bagaimana kita ingin menggunakan modul axios ini atau mengimportnya dapat kita lakukan sesuai yang kita inginkan, seperti mengimport di setiap komponen yang memerlukan axios atau dengan mengaturnya secara global pada file main aplikasi dan dapat digunakan di semua komponen.

Import Axios pada Komponen Vue

Mari kita coba cara pertama import axios pada komponen vue dan membuat permintaan GET mengambil data pada backend.

Pada komponen vue kita buat seperti di bawah ini.

<template>
  <div id="app">
   {{data}}
  </div>
</template>
 
<script> 
import axios from 'axios'
  
export default {
  name: 'App', 
  data() {
    return {
       data: []
    }
  },
  created() {
      axios.get(`http://localhost:8000/api/customers`)
          .then(response => {
            this.data = response.data.data;
            console.log(response.data.data);  
          })
          .catch(error => {
            console.error(error);
      })
    }, 
}
</script>

Kita import axios di dalam tag <script> seperti di atas untuk dapat kita menggunakan axios.[method] membuat permintaan ke API.

Konfigurasi Global Axios

Selanjutnya kita coba untuk mengatur axios sebagai metode permintaan global yang digunakan di setiap komponen tanpa melakukan import.

Untuk mengaturnya, kita import axios pada file main.js atau entry file aplikasi dan menetapkan baseurl alamat API kita, seperti dibawah ini.

//main.js
import axios from 'axios'

window.axios = axios;

axios.defaults.baseURL = 'http://localhost:8000/api';

Sekarang pada komponen vue, kita tinggal membuat permintaan tanpa melakukan import axios dan hanya menggunakan path endpoint /customers pada permintaan tanpa base url http://localhost:8000/api.

<template>
  <div id="app">
   {{data}}
  </div>
</template>
 
<script>  
  
export default {
  name: 'App', 
  data() {
    return {
       data: []
    }
  },
  created() {
      axios.get(`/customers`)
          .then(response => {
            this.data = response.data.data;
            console.log(response.data.data);  
          })
          .catch(error => {
            console.error(error);
      })
    }, 
}
</script>

Permintaan berhasil dibuat dan sukses.

Demikian cara menggunkan axios pada vue cli dan dengan contoh penggunaan dengan dua versi penetapan modul axios.

Silahkan dicoba.

Postingan terkait: Vue.js CRUD: Membuat backend REST API laravel 8