Fetch Data API dengan Axios di Vue.js: Panduan Lengkap!

Mengambil data dari API adalah bagian penting dalam pengembangan aplikasi berbasis Vue.js. Salah satu cara terbaik untuk melakukan ini adalah dengan menggunakan Axios, sebuah pustaka HTTP client yang ringan dan mudah digunakan.

Dalam artikel ini, kita akan membahas cara menggunakan Axios di Vue.js untuk mengambil data dari API, menangani error, serta mengoptimalkan pengambilan data.

📌 Baca juga: Membuat Infinite Scroll di Vue.js: Teknik Praktis dengan Intersection Observer

---

1. Apa Itu Axios?

Axios adalah pustaka JavaScript berbasis Promise yang digunakan untuk melakukan request HTTP. Dibandingkan dengan fetch(), Axios memiliki beberapa keunggulan:
✅ Mudah digunakan → Sintaks lebih sederhana dibandingkan fetch().
✅ Dukungan otomatis untuk JSON → Tidak perlu mengonversi respons secara manual.
✅ Mendukung interceptors → Bisa menangani request dan response secara global.
✅ Mendukung request timeout dan cancel → Memungkinkan pengendalian lebih baik terhadap request API.

2. Instalasi Axios di Vue.js

a. Instalasi dengan NPM

Jalankan perintah berikut di terminal:

sh
npm install axios

b. Import Axios dalam Komponen Vue

Tambahkan Axios dalam file main.js:

javascript
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

Dengan cara ini, kita bisa menggunakan this.$axios di semua komponen Vue.

3. Mengambil Data API dengan Axios

Buat komponen baru FetchData.vue dan tambahkan kode berikut:

vue
<template>
  <div class="container">
    <h1>Daftar Pengguna</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])
const loading = ref(true)
const error = ref(null)

const fetchUsers = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users')
    users.value = response.data
  } catch (err) {
    error.value = 'Gagal mengambil data!'
  } finally {
    loading.value = false
  }
}

onMounted(fetchUsers)
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 10px;
  background: #f5f5f5;
  margin: 5px 0;
  border-radius: 5px;
}
</style>

Penjelasan Kode

1. Menginisialisasi data (users) sebagai array kosong.

2. Menggunakan axios.get() untuk mengambil data dari API.

3. Menangani error jika request gagal.

4. Menampilkan loading indicator saat data sedang diambil.

4. Menggunakan Axios dengan API yang Memerlukan Token

Jika API memerlukan Authorization Token, kita bisa menambahkannya dalam headers:

javascript

axios.get('https://api.example.com/data', {
  headers: {
    Authorization: `Bearer YOUR_ACCESS_TOKEN`
  }
})

5. Membuat Instance Axios Global untuk API

Agar lebih mudah dalam menangani request API, kita bisa membuat instance Axios dengan konfigurasi default.

Buat file baru api.js:

javascript
import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
})

export default api

Lalu gunakan di komponen Vue:

javascript
import api from '@/api'

const fetchData = async () => {
  const response = await api.get('/data')
  console.log(response.data)
}

6. Kesimpulan

Menggunakan Axios di Vue.js membuat proses pengambilan data dari API menjadi lebih mudah dan efisien. Dengan berbagai fitur seperti interceptors, timeout handling, dan global instance, Axios menjadi pilihan terbaik untuk menangani HTTP request di aplikasi Vue.js.

📌 Baca juga: Membuat Infinite Scroll di Vue.js: Teknik Praktis dengan Intersection Observer