⚡ Cara Menggunakan RESTful API dengan Axios di React atau Vue JS

 

Dalam pengembangan web modern, RESTful API adalah cara utama untuk menghubungkan front-end dengan server.
Untuk melakukan request HTTP secara efisien, Axios menjadi pilihan populer karena sederhana, powerful, dan mendukung promise.

Artikel ini membahas cara menggunakan RESTful API dengan Axios di React & Vue JS, termasuk GET, POST, PUT, DELETE, error handling, dan best practices.

---

🔍 Apa Itu RESTful API dan Axios?

1. RESTful API

   • API berbasis HTTP yang menggunakan metode: GET, POST, PUT, DELETE

   • Endpoint → representasi resources (misal: /users, /products)

   • Format umum: JSON

2. Axios

   • Library HTTP client untuk browser dan Node.js

   • Mendukung promise → async/await

   • Bisa intercept request/response → logging, error handling

   • Ringan, mudah integrasi dengan React, Vue, Angular

---

⚙️ Setup Axios di React atau Vue

1. Install Axios

npm install axios

2. Struktur Folder (React Example)

src/
├─ api/
│  └─ api.js
├─ components/
└─ App.jsx

---

🧩 Menggunakan Axios di React

api/api.js

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

export default api;

Component React: GET Data

import React, { useEffect, useState } from 'react';
import api from './api/api';

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await api.get('/users');
        setUsers(response.data);
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

export default Users;

POST Data

const addUser = async (user) => {
  try {
    const response = await api.post('/users', user);
    console.log('User added:', response.data);
  } catch (error) {
    console.error('Error adding user:', error);
  }
};

---

🧩 Menggunakan Axios di Vue JS

api/api.js

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

export default api;

Component Vue: GET Data

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
import api from '../api/api.js';

export default {
  data() {
    return { users: [] };
  },
  async mounted() {
    try {
      const response = await api.get('/users');
      this.users = response.data;
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  }
};
</script>

POST Data

methods: {
  async addUser(user) {
    try {
      const response = await api.post('/users', user);
      console.log('User added:', response.data);
    } catch (error) {
      console.error('Error adding user:', error);
    }
  }
}

---

⚡ Best Practices Axios + RESTful API

1. Centralized API Instance

   • Buat satu file api.js → semua request lewat sini → mudah maintain

2. Async/Await

   • Gunakan async/await → kode lebih readable daripada .then()

3. Error Handling

   • Cek status code → tampilkan feedback ke user

if(error.response){
  console.error(error.response.data);
}

4. Request Interceptors

   • Tambahkan auth token, logging, spinner loading

api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${token}`;
  return config;
});

5. Response Interceptors

   • Central error handling → misal redirect login jika 401

6. Timeout & Retry

   • Tentukan timeout → mencegah request menggantung

   • Bisa implement retry logic untuk koneksi unstable

---

🧠 Integrasi dengan UI & UX

• Loading State

  • Tampilkan spinner saat fetch data

• Optimistic UI

  • Update UI sebelum server respon → smoother experience

• Pagination / Infinite Scroll

  • Query data page by page → efisien, tidak overload

---

🧩 Contoh Aplikasi Real-World

1. Dashboard Admin

   • Fetch users, orders, statistik → GET, POST, DELETE

2. E-commerce

   • Product list → GET

   • Add to cart / checkout → POST

   • Update stock → PUT

   • Remove product → DELETE

3. Chat App

   • Fetch chat history → GET

   • Send message → POST

---

🧭 Kesimpulan

Menggunakan RESTful API dengan Axios di React atau Vue memudahkan:

• Fetch data → GET, POST, PUT, DELETE

• Handle error & loading state

• Integrasi UI interaktif → UX lebih baik

• Centralized API → maintainable dan scalable

🔥 Intinya: developer Indonesia bisa membangun web app modern, efisien, dan interaktif dengan Axios dan RESTful API, meningkatkan produktivitas dan kualitas kode.