HTTP Requests di JavaScript dengan Axios

1 min read .

Updated on 02 Sep 2025

HTTP Requests di JavaScript dengan Axios

Kalau urusan HTTP request di JavaScript, Axios itu lifesaver. Sintaksnya simpel, promise-based, dan lebih bersih dibanding fetch. Gini deh, saya kasih contoh CRUD pakai DummyJSON API.

1. Instalasi

npm install axios

Atau pakai CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. Ambil Semua Produk

axios.get('https://dummyjson.com/products')
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

3. Ambil Produk Berdasarkan ID

axios.get('https://dummyjson.com/products/1')
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

4. Cari Produk

axios.get('https://dummyjson.com/products/search?q=phone')
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

5. Tambah Produk Baru

axios.post('https://dummyjson.com/products/add', { title: 'BMW Pencil' })
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

6. Update Produk

axios.put('https://dummyjson.com/products/1', { title: 'iPhone Galaxy +1' })
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

7. Hapus Produk

axios.delete('https://dummyjson.com/products/1')
  .then(res => console.log(res.data))
  .catch(err => console.error('Error:', err));

8. Modul Axios

Biar rapi, bisa bikin modul:

// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://dummyjson.com/',
  headers: { 'Content-Type': 'application/json' }
});

export default {
  getProducts: () => apiClient.get('products'),
  getProduct: id => apiClient.get(`products/${id}`),
  searchProducts: q => apiClient.get('products/search', { params: { q } }),
  addProduct: p => apiClient.post('products/add', p),
  updateProduct: (id, p) => apiClient.put(`products/${id}`, p),
  deleteProduct: id => apiClient.delete(`products/${id}`)
};

Import dan pakai di kode utama:

import api from './api.js';

api.getProducts().then(res => console.log(res.data));

9. Tips dan Best Practices

Error Handling: selalu pakai .catch().
Interceptors: buat token atau transform global request/response.
Timeout: cegah server nge-hang.

const apiClient = axios.create({ baseURL: 'https://dummyjson.com/', timeout: 5000 });

Kesimpulan

Axios bikin HTTP request di JavaScript jadi mudah, cepat, dan rapi. CRUD, interceptors, timeout, semua bisa di-handle dengan clean syntax. Pada akhirnya, kerjaan coding jadi lebih lancar tanpa ribet.