Contoh Ajax Fetch Memakai JavaScript: Panduan Lengkap dari Dasar hingga Advanced

Seperti yang telah kita ketahui, fetch memanfaatkan promise dalam melakukan tugasnya, sehingga network request yang dibuat memakai fetch akan sering berjalan asynchronous. Dalam panduan contoh ajax fetch ini, kita akan membahas cara menggunakan Fetch API untuk melakukan HTTP request di JavaScript secara lengkap.

Nah, sebelum kita masuk ke kode, penting untuk dipahami dulu kenapa fetch menjadi pilihan utama developer modern. Dulu, untuk melakukan AJAX (Asynchronous JavaScript and XML), kita harus menggunakan XMLHttpRequest atau XHR. Cara kerjanya ribet — harus membuat objek, open koneksi, set header manual, baru deh kirim request. Fetch API hadir sebagai solusi yang jauh lebih bersih dan modern. Kalau XHR seperti menulis surat formal, fetch lebih seperti chat langsung — singkat, jelas, dan langsung pada intinya.

Yang menarik, fetch sudah didukung oleh semua browser modern (Chrome, Firefox, Safari, Edge) dan bisa digunakan tanpa library tambahan apapun. Jadi Anda tidak perlu menginstal Axios atau jQuery hanya untuk melakukan HTTP request. Cukup tulis fetch() dan browser langsung mengerti.

Contoh Ajax Fetch: Pemakaian Dasar untuk HTTP Request

Pemakaian dasar dari fetch terlihat seperti ini:

// Pemakaian paling sederhana dari fetch
// Cukup panggil fetch() dengan URL target sebagai parameter
fetch("https://web-server-book-dicoding.appspot.com/daftar");

Network request dilakukan terhadap saat fungsi fetch() tereksekusi. Baris di atas akan mengirim GET request ke URL yang dituju. Tapi tunggu dulu — fetch mengembalikan sebuah Promise, bukan data langsung. Artinya kalau Anda hanya menulis seperti di atas tanpa.then() atau await, Anda tidak akan melihat hasil apapun di console.

Bayangkan seperti ini: fetch itu seperti memesan makanan delivery. Anda memberikan pesanan (URL), lalu restoran mengonfirmasi bahwa pesanan diterima (Promise), tetapi makanannya belum sampai ke tangan Anda. Anda harus menunggu pengantaran (resolve) sebelum bisa makan (menggunakan data). Tanpa menunggu atau memproses hasilnya, Anda hanya punya “janji” bahwa data akan datang.

Contoh Ajax Fetch: Memahami Response Object

Bila request berhasil diproses oleh server, fungsi fetch() akan mengembalikan promise resolve dan membawa response object di dalamnya. Tetapi nilai response yang dibawa resolve belum merupakan data JSON yang kita perlukan, tetapi informasi tentang response itu sendiri, seperti status code, target url, headers, dsb.

Oleh sebab itu, agar mendapatkan data JSON yang diperlukan, kita harus merubah response object ke dalam wujud JSON dengan memanggil method .json(). Method .json() juga mengembalikan Promise, sehingga kita memerlukan chaining promise dengan menambahkan .then() agar mendapatkan data JSON yang sebenarnya.

Berikut cara lengkapnya dengan penjelasan tiap langkah:

// fetch() mengembalikan Promise, jadi kita pakai.then() untuk menangani hasilnya
fetch("https://web-server-book-dicoding.appspot.com/daftar").then(response => {
 // response di sini BUKAN data JSON, melainkan Response object
 // yang berisi info seperti status, headers, dll.
 return response.json(); //.json() juga mengembalikan Promise!
 }).then(responseJson => {
 // Baru di sini kita mendapatkan data JSON yang sebenarnya
 console.log(responseJson);
 });

Penjelasan langkah demi langkah:

• fetch(...) — Mengirim GET request ke server. Mengembalikan Promise yang resolve dengan Response object.
• .then(response =>...) — Dipanggil ketika Promise pertama resolve. Parameter response adalah Response object, bukan data mentah.
• return response.json() — Mengubah body response menjadi JSON. Juga mengembalikan Promise, sehingga perlu chaining.then() lagi.
• .then(responseJson =>...) — Di sinilah data JSON tersedia untuk Anda gunakan.

Contoh AJAX Fetch: Menangani Error dengan.catch()

Lalu jangan sampai lupa juga untuk menambahkan block catch() di akhir chaining promise untuk menangani jika rejected promise terjadi baik sebab fungsi fetch() atau json().

// Versi lengkap dengan error handling
fetch("https://web-server-book-dicoding.appspot.com/daftar").then(response => {
 return response.json();
 }).then(responseJson => {
 console.log(responseJson);
 }).catch(error => {
 // Bagian ini akan dijalankan JIKA terjadi error
 // Entah karena URL salah, server down, atau jaringan putus
 console.log(error);
 });

Tip penting: Selalu sertakan.catch() dalam setiap fetch call Anda. Tanpa error handler, error yang terjadi akan diam-diam menghilang dan Anda tidak akan tahu apa yang salah saat debugging. Ini adalah kesalahan paling umum yang dilakukan pemula.

Satu hal yang perlu diingat: fetch hanya akan me-reject Promise saat ada kesalahan jaringan (misalnya tidak ada koneksi internet). Jika server mengembalikan status error seperti 404 atau 500, fetch tetap menganggapnya sebagai resolve. Artinya Anda tetap perlu memeriksa response.ok atau response.status secara manual.

fetch("https://web-server-book-dicoding.appspot.com/daftar").then(response => {
 // Cek apakah status code menunjukkan sukses (200-299)
 if (!response.ok) {
 throw new Error(`HTTP error! Status: ${response.status}`);
 }
 return response.json();
 }).then(responseJson => {
 console.log(responseJson);
 }).catch(error => {
 console.error("Terjadi kesalahan:", error);
 });

Alternatif Contoh AJAX: Menggunakan async/await

Sebab fetch memanfaatkan promise, kita dapat memanfaatkan async/await bila Anda lebih suka dengan gaya penulisan synchronous. Banyak developer lebih menyukai cara ini karena kodenya terbaca dari atas ke bawah, seperti kode JavaScript biasa tanpa.then() bertingkat.

// === VERSI PROMISE ===
fetch("https://web-server-book-dicoding.appspot.com/daftar").then(response => response.json()).then(responseJson => console.log(responseJson)).catch(error => console.log(error));

// === VERSI ASYNC/AWAIT ===
async function getBooks() {
 try {
 // 'await' memblok eksekusi sampai Promise resolve
 const response = await fetch("https://web-server-book-dicoding.appspot.com/daftar");
 // Mengubah response menjadi JSON, juga membutuhkan await
 const responseJson = await response.json();
 console.log(responseJson);
 } catch (error) {
 // catch di sini menangani error dari fetch ATAU dari.json()
 console.log(error);
 }
}
// Jangan lupa memanggil fungsi async-nya!
getBooks();

Penjelasan penting:

• async function — Menandai bahwa fungsi ini mengembalikan Promise dan boleh menggunakan await di dalamnya.
• await — Membuat JavaScript menunggu sampai Promise selesai sebelum lanjut ke baris berikutnya. Hanya bisa digunakan di dalam async function.
• try...catch — Menggantikan.catch() dalam pendekatan Promise. Lebih intuitif karena syntax-nya sama seperti error handling di bahasa lain.
• Perhatikan: const response = await fetch(...) menyimpan Response object, bukan data JSON. Anda masih perlu await response.json() di baris berikutnya.

Contoh Fetch AJAX Advanced: Menggunakan Options pada Fetch

Changing Request Method (POST, PUT, DELETE)

Fungsi fetch() bisa menerima dua buah patokan di dalamnya. Selain menetapkan target URL, kita juga bisa memberikan options untuk menetapkan method, header, body, dsb pada request yang akan dijalankan.

Pemakaian fetch() tanpa menerapkan options akan membuat GET request sederhana. Lantas kapan kita harus menerapkan options? Saat Anda perlu melakukan POST, PUT, atau DELETE — atau saat perlu mengirim data ke server.

// POST request — mengirim data baru ke server
fetch("https://web-server-book-dicoding.appspot.com/add", {
 method: "POST" // Mengubah method dari GET (default) menjadi POST
});

Nilai dari properti method dituliskan dalam wujud string: “POST”, “PUT”, “DELETE”, “PATCH”, dsb. Nilai defaultnya adalah “GET”, sehingga bila kita membuat GET request, kita tidak perlu menetapkan nilai method secara eksplisit.

Menambahkan Request Headers

Untuk menambahkan request header dengan fetch kita pakai properti headers pada options. Misalnya untuk menambahkan Content-Type dengan nilai application/json:

fetch("https://web-server-book-dicoding.appspot.com/add", {
 method: "POST",
 headers: {
 "Content-Type": "application/json" // Memberi tahu server kita mengirim JSON
 }
});

Kita juga bisa menetapkan lebih dari satu properti pada headers. Misalnya tambahkan X-Auth-Token untuk autentikasi:

fetch("https://web-server-book-dicoding.appspot.com/add", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 "X-Auth-Token": "12345" // Token autentikasi
 }
});

Mengirim Data ke Body Request

Untuk mengirimkan data pada body request kita pakai properti body pada options. Data harus dikonversi menjadi JSON string terlebih dahulu menggunakan JSON.stringify():

fetch("https://web-server-book-dicoding.appspot.com/add", {
 method: "POST",
 headers: {
 "Content-Type": "application/json",
 "X-Auth-Token": "12345"
 },
 body: JSON.stringify({ // Mengubah objek JavaScript menjadi string JSON
 id: 10,
 title: "Edensor",
 author: "Andrea Hirata"
 })
});

Sama seperti XHR, data yang dikirimkan melalui body request perlu diubah jadi JSON String terlebih dulu. Tanpa JSON.stringify(), data yang dikirim akan berupa [object Object] yang tidak bisa dibaca oleh server. Ini adalah error yang sangat umum terjadi pada pemula.

Kamu bisa coba lakukan POST request memakai Fetch dengan menjalankan potongan kode itu di browser console (F12 → tab Console) untuk langsung melihat hasilnya.

Contoh Lengkap AJAX Fetch: CRUD dengan Fetch

Berikut contoh penggunaan fetch untuk operasi CRUD lengkap — Create, Read, Update, dan Delete — yang sering Anda butuhkan dalam pengembangan web nyata:

const API_URL = "https://web-server-book-dicoding.appspot.com";

// === CREATE — Menambah data baru ===
async function addBook(book) {
 try {
 const response = await fetch(`${API_URL}/add`, {
 method: "POST",
 headers: { "Content-Type": "application/json" },
 body: JSON.stringify(book)
 });
 const result = await response.json();
 console.log("Buku berhasil ditambahkan:", result);
 } catch (error) {
 console.error("Gagal menambah buku:", error);
 }
}

// === READ — Mengambil semua data ===
async function getAllBooks() {
 try {
 const response = await fetch(`${API_URL}/daftar`);
 const books = await response.json();
 console.log("Daftar buku:", books);
 return books;
 } catch (error) {
 console.error("Gagal mengambil data:", error);
 }
}

// === UPDATE — Memperbarui data ===
async function updateBook(id, newData) {
 try {
 const response = await fetch(`${API_URL}/update/${id}`, {
 method: "PUT",
 headers: { "Content-Type": "application/json" },
 body: JSON.stringify(newData)
 });
 const result = await response.json();
 console.log("Buku berhasil diupdate:", result);
 } catch (error) {
 console.error("Gagal update buku:", error);
 }
}

// === DELETE — Menghapus data ===
async function deleteBook(id) {
 try {
 const response = await fetch(`${API_URL}/delete/${id}`, {
 method: "DELETE"
 });
 console.log("Buku berhasil dihapus");
 } catch (error) {
 console.error("Gagal menghapus buku:", error);
 }
}

// Contoh penggunaan:
getAllBooks();
addBook({ title: "Edensor", author: "Andrea Hirata" });

Kesalahan Umum Saat Menggunakan Fetch AJAX

Ada beberapa jebakan yang sering menanti developer pemula saat pertama kali menggunakan fetch. Berikut yang paling sering terjadi:

• Lupa await atau.then() — fetch() mengembalikan Promise, bukan data. Tanpa menanganinya, Anda hanya akan melihat objek Promise di console.
• Tidak memeriksa response.ok — Fetch tidak otomatis error saat status 404 atau 500. Selalu cek if (!response.ok) sebelum memproses data.
• Lupa JSON.stringify() saat POST — Mengirim object JavaScript langsung ke body tanpa konversi akan menghasilkan [object Object].
• Melupakan Content-Type header — Tanpa header “Content-Type”: “application/json”, server mungkin menolak request Anda.
• Error handling tidak ada — Tanpa.catch() atau try…catch, error akan diam-diam menghilang.

Fetch vs XMLHttpRequest vs Axios: Perbandingan HTTP Request

Agar Anda bisa memilih tool yang tepat, berikut perbandingan singkat ketiga metode HTTP request di JavaScript:

• XMLHttpRequest (XHR) — Cara lama. Sangat verbose dan sulit dibaca. Sudah mulai ditinggalkan tapi masih ada di banyak codebase legacy.
• Fetch API — Standar modern. Built-in di browser, berbasis Promise, bersih dan ringkas. Pilihan terbaik untuk sebagian besar kasus.
• Axios — Library pihak ketiga. Otomatis mengubah response ke JSON, memiliki interceptors, dan error handling yang lebih baik. Bagus untuk proyek besar.

Untuk proyek baru, fetch sudah lebih dari cukup. Tapi kalau Anda butuh fitur seperti request interceptors atau automatic transforms, Axios bisa menjadi pilihan yang solid.

Rangkuman Contoh Ajax Memakai Fetch

1. Fetch berbasis Promise — Gunakan.then()/.catch() atau async/await untuk menangani hasilnya.
2. Response object ≠ data JSON — Selalu panggil response.json() (atau.text(),.blob()) untuk mendapatkan data yang sebenarnya.
3. Error handling wajib — Selalu sertakan.catch() atau blok try…catch di setiap fetch call.
4. Gunakan options untuk POST/PUT/DELETE — Atur method, headers, dan body sesuai kebutuhan.
5. JSON.stringify() untuk body — Data harus dikonversi ke string JSON sebelum dikirim melalui body request.

Selamat mencoba! Fetch API memang terdengar rumit di awal, tapi setelah Anda terbiasa dengan pola Promise-nya, Anda akan menyadari betapa elegannya cara kerjanya.

Referensi resmi: MDN Web Docs — Fetch API | MDN Web Docs — Response Object

Hal yang sering ditanyakan seputar Ajax Fetch JavaScript