Belajar JavaScript - Fetch API dan AJAX

#Pendahuluan

Halaman yang hanya berisi HTML statis cepat terasa terbatas. Aplikasi modern menampilkan data yang datang dari server — berita, harga, profil pengguna — dan menyegarkannya tanpa memuat ulang halaman. Teknik ini dikenal sebagai AJAX, dan implementasi modernnya di JavaScript adalah Fetch API.

Episode 15 membahas fetch dari awal sampai siap pakai: mengambil data dengan GET, membaca respons JSON, mengirim data dengan POST beserta header yang benar, dan menangani status HTTP serta error dengan tepat. Kalian akan membangun klien API yang lengkap untuk sebuah endpoint publik.

Satu konsep kunci yang menantang pemahaman awal: fetch bersifat asynchronous. Respons tidak langsung tersedia — kalian akan melihat mekanisme lengkapnya di episode 16 tentang Promise.

#Konsep AJAX dan Fetch

#Mengapa AJAX Ada

Sebelum AJAX, setiap perubahan data berarti memuat ulang seluruh halaman — lambat dan mengganggu. AJAX memecah pola itu: halaman mengirim permintaan di latar belakang, menerima data, lalu memperbarui hanya bagian yang berubah. JavaScript berperan sebagai penghubung antara antarmuka dan server.

fetch adalah API bawaan browser (dan Node.js sejak versi 18) untuk melakukan ini. Bentuk paling sederhananya:

Fetch paling sederhana

const respons = await fetch("https://api.contoh.com/posts");
const data = await respons.json();
console.log(data);

fetch(url) mengirim permintaan GET dan mengembalikan objek yang menunggu respons. await respons.json() mengubah isi respons yang berupa JSON menjadi objek JavaScript. Kata await hanya berlaku di dalam fungsi async — kalian akan memahami keduanya penuh di episode 16.

#Mengambil Data dengan GET

#Menggunakan JSON Placeholder

Untuk latihan, pakai endpoint publik yang stabil, misalnya JSONPlaceholder. Struktur lengkap dengan error handling:

GET dengan async function

async function ambilPosting() {
  const respons = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const posting = await respons.json();
  return posting;
}
 
const hasil = await ambilPosting();
console.log(hasil.title);

async function ambilPosting() membungkus logika yang menunggu. jsonplaceholder.typicode.com/posts/1 mengembalikan satu objek posting JSON. hasil.title mengakses judulnya. Inilah pola dasar setiap request GET di aplikasi nyata: fetch, parse JSON, lalu gunakan datanya.

#Melakukan Fetch dari Node.js

Node.js 18 ke atas punya fetch bawaan, jadi contoh di atas bisa dijalankan langsung di terminal:

node --version
node -e "fetch('https://jsonplaceholder.typicode.com/posts/1').then(r => r.json()).then(d => console.log(d.title))"

node -e "fetch(...) mengeksekusi kode tanpa file. Node 18+ memakai runtime fetch berbasis undici — bukan library pihak ketiga. Cek dulu node --version untuk memastikan versi minimal 18, lalu perhatikan bahwa hasilnya sama dengan yang dijalankan di browser.

#Mengirim Data dengan POST

#Opsi Header dan Body

Untuk mengirim data, fetch menerima objek konfigurasi kedua dengan method, header, dan body:

POST dengan fetch

async function buatPosting() {
  const respons = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title: "Belajar Fetch API",
      body: "Mengirim data ke server",
      userId: 1,
    }),
  });
 
  const hasil = await respons.json();
  return hasil;
}
 
const dibuat = await buatPosting();
console.log(dibuat.id);

method: "POST" mengubah permintaan menjadi pengiriman data. headers memberitahu server bahwa isi body adalah JSON, dan body: JSON.stringify(...) mengubah objek menjadi string JSON. Server yang mendukung JSON Placeholder merespons dengan objek yang memuat id baru.

#Menyiapkan Data Form

Untuk form HTML, format JSON sering diganti dengan FormData yang otomatis menangani encoding:

Mengirim FormData

async function kirimForm(data) {
  const formData = new FormData();
  formData.append("nama", data.nama);
  formData.append("pesan", data.pesan);
 
  const respons = await fetch("/api/kontak", {
    method: "POST",
    body: formData,
  });
 
  return respons.ok;
}
 
console.log(await kirimForm({ nama: "Arman", pesan: "Halo" }));

new FormData() membangun body dalam format multipart yang dikenali server. Saat memakai FormData, jangan set Content-Type secara manual — browser menambahkan boundary yang tepat. respons.ok bernilai true untuk status HTTP 2xx.

#Menangani Status HTTP dan Error

#Jebakan fetch: HTTP Error Bukan Throw

Jebakan klasik: fetch tidak melempar error saat server merespons dengan status 404 atau 500. Kode tetap berjalan. Kalian harus memeriksa status secara eksplisit:

Memeriksa status HTTP

async function ambilDenganCek() {
  const respons = await fetch("https://jsonplaceholder.typicode.com/posts/99999");
 
  if (!respons.ok) {
    throw new Error(`HTTP ${respons.status}: ${respons.statusText}`);
  }
 
  return respons.json();
}
 
try {
  const data = await ambilDenganCek();
  console.log(data);
} catch (error) {
  console.error("Gagal:", error.message);
}

if (!respons.ok) menangkap semua status selain 2xx dan melempar error dengan informasi status. throw new Error membangkitkan error yang bisa ditangkap try...catch. Hanya error jaringan — server tidak terjangkau, DNS gagal — yang membuat fetch melempar otomatis.

#Perbedaan Dua Jenis Error

Penting membedakan dua lapis error:

• Error jaringan: fetch melempar, misalnya koneksi terputus.
• Error HTTP: fetch tidak melempar; kalian harus cek respons.ok.

Pola standar di production: periksa respons.ok, lempar error dengan status, lalu tangkap di try...catch untuk menampilkan pesan yang ramah ke pengguna.

#Penutup

Episode 15 membekali kalian komunikasi client-server: konsep AJAX, mengambil data dengan fetch dan response.json, mengirim data dengan POST beserta header dan FormData, serta menangani status HTTP dan error dengan pemeriksaan respons.ok.

Inti yang harus dibawa pulang:

• fetch(url) mengirim GET dan mengembalikan respons yang asynchronous.
• await respons.json() mengubah body JSON menjadi objek JavaScript.
• POST memakai objek konfigurasi dengan method, headers, dan body.
• JSON.stringify mengubah objek menjadi string untuk dikirim.
• fetch tidak melempar error pada status 4xx dan 5xx — cek respons.ok.
• Node.js 18+ memiliki fetch bawaan untuk menjalankan contoh di terminal.

Di episode 16 selanjutnya kita akan membahas Promise, async/await, dan penanganan error asynchronous — mekanisme yang menggerakkan semua kode yang menunggu, dari fetch sampai setTimeout. Kalian akan menguasai .then, .catch, Promise.all, dan try/catch async untuk menulis kode asynchronous yang andal.