Kamu sedang membangun fitur yang butuh mengambil data dari server tanpa reload halaman, lalu dihadapkan pada dua pilihan: pakai fetch yang terlihat modern atau XMLHttpRequest yang sudah lama ada. Keduanya bisa melakukan hal yang sama, tetapi cara pakai dan perilakunya berbeda. Perbandingan fetch dan XMLHttpRequest berikut membantu kamu memilih sesuai kebutuhan proyek.
Apa itu fetch dan XMLHttpRequest?
fetch adalah API JavaScript yang mengembalikan Promise, sehingga bisa dipakai dengan async/await. XMLHttpRequest (XHR) adalah API lama yang masih bekerja di semua browser dan menjadi dasar banyak library AJAX. XHR memakai event handler dan callback, bukan Promise.
Perbedaan sintaks: Promise vs Callback
Dengan fetch, kode terlihat lebih ringkas, terutama saat menangani beberapa request berurutan.
async function ambilData() {
const res = await fetch('/api/data');
const data = await res.json();
console.log(data);
}
Versi XHR memerlukan lebih banyak baris dan pengaturan event:
function ambilData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();
}
Kalau proyekmu sudah memakai Promise atau async/await, fetch lebih nyaman. XHR masih berguna jika kamu harus mendukung browser sangat lama atau membutuhkan progres upload file.
Penanganan error: fetch tidak melempar error HTTP
fetch tetap dianggap sukses meskipun server mengembalikan status 404 atau 500. fetch hanya melempar error jaringan, bukan error HTTP. Jadi kamu perlu memeriksa response.ok secara manual.
const res = await fetch('/api/data');
if (!res.ok) {
throw new Error('Request gagal: ' + res.status);
}
XHR juga tidak otomatis melempar error untuk status non-2xx, tetapi kita bisa memeriksa xhr.status di event onload. Bedanya, XHR punya event onerror yang terpisah untuk kegagalan jaringan. Pola penanganan error di XHR lebih eksplisit karena kita mengatur sendiri kapan permintaan dianggap gagal.
Dukungan browser dan fitur tambahan
fetch didukung semua browser modern, termasuk Edge. Untuk browser sangat lama seperti IE11, kamu perlu polyfill. XHR didukung hampir semua browser sejak lama, termasuk IE9. Jika target pengguna masih memakai browser lawas, XHR lebih aman tanpa polyfill.
Fitur seperti upload progress lebih mudah di XHR karena ada event onprogress pada xhr.upload. Di fetch, pemantauan progres upload memerlukan ReadableStream yang belum didukung semua browser. Untuk download progress, keduanya bisa, tetapi XHR lebih sederhana.
Kapan sebaiknya pakai fetch?
Pilih fetch jika:
- Proyek baru dan kamu nyaman dengan Promise/async-await.
- Tidak perlu mendukung IE11 atau browser lawas lain.
- Ingin kode yang lebih bersih dan mudah diuji.
- Tidak memerlukan upload progress yang rumit.
Fetch juga terintegrasi baik dengan Service Worker dan arsitektur modern lainnya.
Kapan XMLHttpRequest masih relevan?
Gunakan XHR jika:
- Harus mendukung browser lama tanpa polyfill.
- Membutuhkan upload progress yang detail.
- Bekerja dengan kode lama yang sudah memakai XHR dan tidak ingin migrasi besar.
- Membutuhkan timeout request yang mudah diatur (fetch butuh AbortController).
Beberapa library pihak ketiga masih memakai XHR di balik layar, jadi memahami XHR tetap berguna saat debugging.
Contoh kasus: mengambil data JSON dengan kedua API
Misalkan kamu ingin menampilkan daftar komentar dari endpoint /api/komentar. Dengan fetch, kodenya seperti ini:
async function tampilkanKomentar() {
try {
const res = await fetch('/api/komentar');
if (!res.ok) throw new Error('Gagal mengambil data');
const komentar = await res.json();
renderKomentar(komentar);
} catch (err) {
console.error(err);
}
}
Dengan XHR:
function tampilkanKomentar() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/komentar');
xhr.onload = function() {
if (xhr.status === 200) {
renderKomentar(JSON.parse(xhr.responseText));
} else {
console.error('Gagal mengambil data');
}
};
xhr.onerror = function() {
console.error('Error jaringan');
};
xhr.send();
}
XHR memisahkan error HTTP dan error jaringan, sedangkan fetch menyatukan semuanya di Promise kecuali kamu memeriksa res.ok.
Tips debugging request AJAX
Baik fetch maupun XHR, kesalahan sering terjadi karena header atau body yang tidak sesuai. Gunakan tab Network di DevTools untuk melihat request dan response. Jika kamu baru mulai, ada baiknya membaca daftar kesalahan kode PHP, JS, dan CSS yang sering bikin bug agar tidak mengulangi masalah umum. Untuk validasi form, kamu bisa mempelajari cara menampilkan error validasi di bawah input dengan JavaScript yang juga memakai request ke server.
Di sisi server, pastikan endpoint mengembalikan status HTTP yang benar. Jika kamu memakai PHP, artikel cara menangani form HTML dengan PHP membahas penanganan request dan response secara umum.
Jika kamu ingin menguji request ke API publik atau lokal sambil bersantai, kamu bisa menonton pertandingan basket, sepakbola, atau UFC secara gratis dengan host kocak di tarkamlive.com. Siapa tahu ada tips debugging dari komunitas di sana.
Ringkasan
Fetch cocok untuk proyek modern yang memakai async/await dan tidak menargetkan browser lama. XMLHttpRequest masih berguna untuk kebutuhan upload progress, dukungan browser lawas, atau memelihara kode yang sudah ada. Pilih berdasarkan konteks proyek dan target pengguna, bukan sekadar mengikuti tren.
Pertanyaan yang Sering Diajukan
Apakah fetch lebih cepat dari XMLHttpRequest?
Kecepatan keduanya sangat bergantung pada jaringan dan server. Fetch tidak otomatis lebih cepat; perbedaannya lebih pada sintaks dan fitur. Untuk ukuran data kecil, perbedaan performa biasanya tidak terasa.
Bisakah saya memakai fetch untuk mengunggah file dengan progress bar?
Bisa, tetapi memerlukan streaming dengan ReadableStream yang belum didukung semua browser. Jika progress bar penting dan harus kompatibel luas, XMLHttpRequest masih pilihan yang lebih sederhana.
Apakah XMLHttpRequest sudah usang?
XHR tidak usang secara resmi dan masih didukung di semua browser. Namun, untuk kode baru, banyak pengembang beralih ke fetch karena lebih ringkas dan mudah dikombinasikan dengan Promise. XHR tetap relevan untuk kebutuhan khusus.