Permintaan API di Vue 3 dengan Axios

2 min read .

Updated on 02 Sep 2025

API adalah tulang punggung aplikasi web modern, memungkinkan pengambilan, pembuatan, pembaruan, dan penghapusan data. Di Vue 3, Axios adalah library populer yang menyederhanakan interaksi dengan API. Panduan ini akan menunjukkan cara menggunakan Axios untuk operasi CRUD (Create, Read, Update, Delete) menggunakan endpoint dummy. Setelah mengikuti tutorial ini, Anda akan memahami cara mengelola data di aplikasi Vue 3 menggunakan Axios.

1. Menyiapkan Axios di Vue 3

Instal Axios melalui npm:

npm install axios

Konfigurasikan Axios di proyek Anda:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// Set URL dasar global (opsional)
axios.defaults.baseURL = 'https://dummyjson.com';

app.config.globalProperties.$axios = axios;
app.mount('#app');

2. Mengambil Daftar Produk

Gunakan Axios untuk mengambil data dari API dan perbarui state komponen.

<!-- FetchProducts.vue -->
<template>
  <div>
    <h1>Product List</h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.title }}</li>
    </ul>
  </div>
</template>

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

const products = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('/products');
    products.value = response.data.products;
  } catch (error) {
    console.error('Error fetching products:', error);
  }
});
</script>

3. Mengambil Produk Tertentu

Untuk menampilkan detail produk berdasarkan ID:

<!-- FetchProduct.vue -->
<template>
  <div v-if="product">
    <h1>{{ product.title }}</h1>
    <p>{{ product.description }}</p>
  </div>
</template>

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

const product = ref(null);
const productId = 1;

onMounted(async () => {
  try {
    const response = await axios.get(`/products/${productId}`);
    product.value = response.data;
  } catch (error) {
    console.error('Error fetching product:', error);
  }
});
</script>

4. Mencari Produk

Gunakan parameter kueri untuk melakukan pencarian:

<!-- SearchProducts.vue -->
<template>
  <div>
    <h1>Search Results</h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.title }}</li>
    </ul>
  </div>
</template>

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

const products = ref([]);
const searchQuery = 'phone';

onMounted(async () => {
  try {
    const response = await axios.get(`/products/search?q=${searchQuery}`);
    products.value = response.data.products;
  } catch (error) {
    console.error('Error searching for products:', error);
  }
});
</script>

5. Menambahkan Produk Baru

Kirim data baru ke API menggunakan POST:

<!-- AddProduct.vue -->
<template>
  <div>
    <button @click="addProduct">Add Product</button>
  </div>
</template>

<script setup>
import axios from 'axios';

async function addProduct() {
  try {
    const response = await axios.post('/products/add', {
      title: 'BMW Pencil',
      description: 'A stylish pencil from BMW.',
      price: 10,
    });
    console.log('Product added:', response.data);
  } catch (error) {
    console.error('Error adding product:', error);
  }
}
</script>

6. Memperbarui Produk

Perbarui data produk menggunakan PUT atau PATCH:

<!-- UpdateProduct.vue -->
<template>
  <div>
    <button @click="updateProduct">Update Product</button>
  </div>
</template>

<script setup>
import axios from 'axios';

async function updateProduct() {
  try {
    const response = await axios.put('/products/1', {
      title: 'iPhone Galaxy +1',
    });
    console.log('Product updated:', response.data);
  } catch (error) {
    console.error('Error updating product:', error);
  }
}
</script>

7. Menghapus Produk

Hapus produk menggunakan DELETE:

<!-- DeleteProduct.vue -->
<template>
  <div>
    <button @click="deleteProduct">Delete Product</button>
  </div>
</template>

<script setup>
import axios from 'axios';

async function deleteProduct() {
  try {
    const response = await axios.delete('/products/1');
    console.log('Product deleted:', response.data);
  } catch (error) {
    console.error('Error deleting product:', error);
  }
}
</script>

8. Praktik Terbaik

Penanganan Kesalahan: Gunakan try-catch untuk memberikan umpan balik yang jelas pada pengguna.
Instance Axios: Buat instance Axios yang dapat digunakan ulang untuk mengelola baseURL, headers, atau interceptor.
Manajemen State: Gunakan properti reaktif Vue 3 untuk menampilkan data secara efisien.

Kesimpulan

Axios mempermudah interaksi dengan API di Vue 3. Dengan panduan CRUD ini, Anda dapat mengambil, membuat, memperbarui, dan menghapus data dengan mudah. Teknik ini bisa diterapkan langsung ke proyek nyata, membantu membangun aplikasi web yang dinamis dan responsif.