Fetch vs Axios - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

1. Apa Itu Fetch dan Axios?

Fetch dan Axios adalah dua cara populer untuk mengambil data dari API di React. Fetch adalah fitur bawaan JavaScript, sementara Axios adalah pustaka eksternal yang menawarkan lebih banyak fitur dan kemudahan.

2. Fetch API: Si Andalan Bawaan

Fetch adalah API bawaan browser untuk melakukan HTTP request. Karena sudah terintegrasi di JavaScript, kita bisa langsung menggunakannya tanpa perlu menginstal pustaka tambahan.

Contoh Penggunaan Fetch:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

3. Axios: Lebih Praktis dan Kaya Fitur

Axios adalah pustaka yang mempermudah HTTP request dengan fitur tambahan seperti otomatis mengubah response ke JSON, menangani timeout, dan mendukung request yang bisa dibatalkan.

Contoh Penggunaan Axios:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

4. Perbandingan Fetch vs Axios

Fitur	Fetch	Axios
Bawaan Browser	Ya	Tidak (Harus Install)
Response JSON	Harus pakai .json()	Otomatis JSON
Error Handling	Harus cek manual	Otomatis menangani
Mendukung Timeout	Tidak	Ya
Bisa Membatalkan Request	Susah	Mudah dengan CancelToken

5. Kesimpulan

• Gunakan Fetch jika ingin solusi ringan tanpa instalasi tambahan.
• Pilih Axios jika butuh fitur lebih lengkap seperti timeout dan request pembatalan.
• Keduanya bisa digunakan di React, tergantung kebutuhan proyek.

Jadi, kamu lebih suka Fetch atau Axios?