Pengantar: Dilema Klasik Developer React
Kalau kamu baru masuk ke dunia React, cepat atau lambat pasti ketemu satu pertanyaan yang kelihatannya sepele tapi sering bikin mikir: pakai Fetch atau Axios ya buat ambil data API? Di tutorial-tutorial awal, dua-duanya sering muncul. Sama-sama bisa jalan, sama-sama kelihatan simpel. Tapi begitu masuk ke project yang agak serius, baru kerasa bedanya.
Biar nggak cuma ngobrol di level teori, di artikel ini kita bakal praktik langsung lewat project sederhana: Toko Baju Online. Kita mulai dari setup React dari nol, ambil data produk dari API, lalu bandingin langsung pengalaman pakai Fetch dan Axios. Santai aja, anggap kita lagi ngoding bareng sambil ngopi.
Gambaran Project: Toko Baju Online Sederhana
Di project ini, kita fokus ke satu hal utama: mengambil dan menampilkan data produk. Nggak pakai backend ribet, nggak pakai state management berat. Cukup React, API publik, dan logika dasar.
Nanti hasil akhirnya berupa halaman yang menampilkan daftar produk baju lengkap dengan nama dan harga. Dari sini, kamu bisa dengan mudah nambahin fitur lain seperti detail produk atau keranjang belanja.
Langkah 1: Setup Project React dari Nol
Biar makin kebayang dan langsung kebiasaan, sekarang coba lakuin langkah ini langsung di VS Code kamu. Buka VS Code, buka terminal di dalamnya, lalu jalankan perintah setup dibawah ini satu per satu. Dengan begitu kamu nggak cuma baca, tapi langsung praktek dari awal—ini penting banget biar alurnya nyantol.
Jalankan perintah berikut:
npm create vite@latest toko-baju-react
cd toko-baju-react
npm install
npm run dev
Begitu server-nya jalan dan halaman default Vite muncul di browser, berhenti sebentar dan nikmatin momennya. Itu tandanya setup React kamu berhasil. Dari sini, kamu sudah siap lanjut ke tahap berikutnya: mulai ngoding, ambil data dari API, dan bandingin langsung Fetch vs Axios di project Toko Baju Online kamu sendiri.
Langkah 2: Menyiapkan API Produk (Dummy Data)
Sebelum langsung dipakai di kode, ada baiknya kamu kenalan dulu sama sumber API-nya. Coba buka browser kamu, lalu kunjungi website Fake Store API di alamat berikut:
<https://fakestoreapi.com>
Di halaman itu kamu bisa lihat penjelasan singkat tentang Fake Store API, daftar endpoint yang tersedia, dan contoh data yang bisa diambil. Ini penting supaya kamu nggak cuma copy URL, tapi juga paham data apa saja yang bakal kamu dapatkan. Setelah itu, coba klik atau buka langsung endpoint produknya di browser:
<https://fakestoreapi.com/products>
Kalau berhasil, kamu bakal lihat data produk dalam format JSON. Nah, data inilah yang nanti akan kita ambil di React menggunakan Fetch dan Axios. Jadi sebelum ngoding, pastikan kamu sudah lihat dulu bentuk datanya di browser—biar pas nanti di UI, kamu nggak nebak-nebak isinya.
Langkah 3: Mengambil Data Menggunakan Fetch API
Mengambil data dengan Fetch
Sebelum nulis kode Fetch-nya, kita rapihin dulu strukturnya. Buka VS Code, masuk ke folder src, lalu buat file baru bernama ProductListFetch.jsx. File ini khusus buat nangani pengambilan data produk. Jangan langsung numpuk semua kode di App.jsx, karena dari awal biasakan komponen dipisah biar project kamu rapi dan gampang dikembangin ke tahap selanjutnya.
Setelah filenya siap, baru kita pakai Fetch API. Fetch adalah fitur bawaan JavaScript yang sudah tersedia di browser, jadi kamu nggak perlu install apa pun. Di React, pengambilan data biasanya diletakkan di dalam useEffect supaya request ke API hanya jalan sekali saat komponen pertama kali dirender. Data produknya kita simpan di useState, bareng status loading, supaya UI bisa tahu kapan harus nampilin “Loading…” dan kapan datanya sudah siap ditampilkan.
import { useEffect, useState } from "react";
function ProductListFetch() {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProducts = async () => {
try {
const response = await fetch(
"<https://fakestoreapi.com/products>"
);
if (!response.ok) {
throw new Error("Response tidak OK");
}
const data = await response.json();
setProducts(data);
} catch (err) {
console.error(err);
setError("Gagal mengambil data produk");
} finally {
setLoading(false);
}
};
fetchProducts();
}, []);
if (loading) return <p>Loading produk...</p>;
if (error) return <p>{error}</p>;
return (
<div className="grid">
{products.map((item) => (
<div key={item.id} className="card">
<img
src={item.image}
alt={item.title}
className="product-image"
/>
<h3>{item.title}</h3>
<p className="category">{item.category}</p>
<p className="price">
Rp {item.price.toLocaleString("id-ID")}
</p>
<p className="description">
{item.description.slice(0, 80)}...
</p>
</div>
))}
</div>
);
}
export default ProductListFetch;
Kalau kita bedah pelan-pelan, fetch() bertugas melakukan request ke API. Response yang dikembalikan masih berupa objek mentah, jadi kita perlu memanggil .json() secara manual supaya datanya bisa dipakai. Setelah itu, data disimpan ke state products dan komponen akan otomatis re-render.
Pendekatan ini sebenarnya sangat jujur dan transparan. Kamu benar-benar melihat setiap prosesnya. Tapi di sisi lain, kamu juga bisa lihat kalau logic-nya mulai memanjang. Untuk project kecil masih aman, tapi di aplikasi yang lebih kompleks, pola seperti ini bisa cepat bikin kode terasa rame.
Langkah 4: Mengambil Data Menggunakan Axios
Mengambil data dengan Axios
Sekarang kita bandingin dengan pendekatan kedua: Axios. Axios adalah library HTTP client yang memang dibuat khusus untuk menangani request ke API. Karena fokusnya di situ, banyak hal yang dibuat lebih ringkas dan konsisten.
Sebelum dipakai, kita install dulu Axios:
npm install axios
Setelah itu, implementasinya di React jadi seperti ini:
import { useEffect, useState } from "react";
import axios from "axios";
function ProductListAxios() {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProducts = async () => {
try {
const response = await axios.get(
"<https://fakestoreapi.com/products>"
);
setProducts(response.data);
} catch (err) {
console.error(err);
setError("Gagal mengambil data produk");
} finally {
setLoading(false);
}
};
fetchProducts();
}, []);
if (loading) return <p>Loading produk...</p>;
if (error) return <p>{error}</p>;
return (
<div className="grid">
{products.map((item) => (
<div key={item.id} className="card">
<img
src={item.image}
alt={item.title}
className="product-image"
/>
<h3>{item.title}</h3>
<p className="category">{item.category}</p>
<p className="price">
Rp {item.price.toLocaleString("id-ID")}
</p>
<p className="description">
{item.description.slice(0, 80)}...
</p>
</div>
))}
</div>
);
}
export default ProductListAxios;
Di sini kelihatan bedanya. Axios langsung ngasih data hasil response lewat response.data, jadi kamu nggak perlu lagi parsing JSON secara manual. Struktur error-nya juga lebih konsisten, yang bikin handling error lebih gampang saat project mulai gede.
Secara visual, kodenya memang mirip. Tapi dari pengalaman ngoding, Axios terasa lebih "tenang" dipakai. Terutama kalau nanti kamu butuh nambah header, auth token, atau konfigurasi global, Axios sudah nyiapin jalurnya.
Perbandingan Fetch vs Axios
Perbandingan penggunaan Fetch dan Axios
Kalau kita bedah dari sisi kode, perbedaan pertama yang langsung kerasa ada di cara menangani response. Di Fetch, hasil request belum langsung berupa data yang bisa dipakai. Kamu masih harus memanggil .json() secara manual untuk mengubah response jadi objek JavaScript. Itu sebabnya di Fetch kita lihat chain seperti fetch().then(res => res.json()).then(data => ...). Di satu sisi ini bagus buat belajar, karena kamu benar-benar paham alurnya. Tapi di sisi lain, kodenya jadi sedikit lebih panjang dan rawan kelupaan kalau lagi ngerjain banyak request.
Sementara di Axios, response yang kamu terima sudah otomatis diparse. Data API langsung bisa diakses lewat response.data. Ini kelihatannya sepele, tapi di project yang lebih besar, efeknya kerasa banget. Kode jadi lebih ringkas, lebih bersih, dan lebih gampang dibaca. Kamu fokus ke logic aplikasi, bukan ke urusan teknis parsing response.
Perbedaan lain yang sering baru kerasa belakangan ada di error handling dan extensibility. Di Fetch, error HTTP (seperti 404 atau 500) nggak otomatis dianggap error—kamu harus cek sendiri status-nya. Sedangkan Axios otomatis melempar error kalau response-nya bermasalah. Selain itu, Axios punya fitur tambahan seperti interceptor, global header, dan config request yang reusable. Inilah alasan kenapa Axios sering dipilih di aplikasi real: bukan karena Fetch nggak bisa, tapi karena Axios bikin workflow developer jauh lebih nyaman dan rapi.
Jadi, Pilih Fetch atau Axios?
Kalau kamu masih di tahap belajar React dan bikin project kecil, Fetch itu pilihan aman dan bagus buat memahami dasar. Tapi kalau target kamu adalah real project, freelance, atau aplikasi skala menengah, Axios bakal terasa jauh lebih nyaman dan scalable.
Banyak developer React akhirnya pakai Axios bukan karena ikut-ikutan, tapi karena memang hidupnya jadi lebih tenang 😄
Mistakes yang Sering Terjadi Saat Pakai Fetch & Axios di React
Di tahap belajar, wajar banget kalau kita fokus ke "pokoknya data muncul" dulu. Tapi justru di sini banyak kesalahan kecil yang sering kebawa sampai ke project serius. Salah satu yang paling sering adalah naruh logic fetch langsung di body komponen tanpa useEffect. Akibatnya, request ke API bisa jalan berkali-kali setiap kali state berubah. Ini bikin performa jelek dan API kamu kena hit terus-terusan tanpa sadar.
Kesalahan lain yang sering kejadian adalah nggak siapin state loading dan error. Banyak pemula langsung render data tanpa ngecek apakah request masih jalan atau gagal. Hasilnya, UI suka blank, error di console, atau user bingung karena layar kosong. Padahal dengan sedikit tambahan state, pengalaman user bisa jauh lebih enak dan aplikasinya kelihatan lebih profesional.
Di Fetch, kesalahan klasik lainnya adalah ngira semua error bakal masuk ke catch. Padahal Fetch nggak otomatis error kalau status response 404 atau 500. Kalau kamu nggak cek response.ok, bug ini bisa lolos tanpa kelihatan. Sementara di Axios, kesalahan yang sering muncul justru kebalikannya: overkill config di awal. Baru project kecil tapi sudah bikin interceptor, config global, dan struktur rumit—ujung-ujungnya malah bingung sendiri.
Intinya, baik Fetch maupun Axios sama-sama aman kalau dipakai dengan sadar. Mulai dari yang simpel dulu, pahami alurnya, baru pelan-pelan naik level. Jangan kejar kompleksitas sebelum butuh.
Penutup
Fetch dan Axios sebenernya bukan soal mana yang paling benar atau mana yang paling “keren”, tapi lebih ke mana yang paling pas sama kebutuhan dan cara kerja kamu. Selama kamu paham alurnya—mulai dari ambil data dari API, simpan ke state, lalu render ke UI—kamu sudah ada di jalur yang benar. Sisanya cuma soal kenyamanan dan skala project. Makanya paling enak itu dicoba langsung. Pakai Fetch dan Axios di project Toko Baju Online ini, rasain sendiri bedanya saat nulis kode, baca ulang logic-nya, dan ngerjain fitur tambahan. Biasanya, begitu sudah “klik” dengan salah satu pendekatan, pilihan itu bakal kebawa terus ke project-project React kamu berikutnya tanpa banyak mikir lagi.
Next step: coba tambahin fitur detail produk atau keranjang belanja sederhana biar makin kerasa real project-nya.
.webp)
