Kurir Antar Kota: Fetch API & HTTP
Sebuah halaman web tidak bisa hidup sendirian. Ia membutuhkan pasokan data dari luar: ngobrol dengan
Database, mengambil daftar produk Toko, hingga mengirimkan data login user. Penghubung antara Aplikasi Depan
(Frontend) dan Aplikasi Belakang (Backend) dinamakan API (Application Programming
Interface).
Untuk mengetuk pintu server Backend, JavaScript masa kini dibekali fitur canggih bernama Fetch
API. Ia mirip seperti abang Kurir Pengantar Paket: kamu titipkan alamat servernya, ia akan
menebeng melintasi internet (lewat jaringan HTTP), dan membawakan pulang kardus data JSON untukmu!
📬 1. Anatomi Perjalanan (HTTP Verbs)
Sebelum "Si Kurir Fetch" berangkat, Frontend dan Backend punya aturan rahasia berupa "Kata Kerja" (HTTP Methods) yang menandakan niat tujuan kurir tersebut:
Niatnya Mengambil/Membaca data. Paling aman, dipakai untuk memuat List Barang atau Artikel.
Niatnya Kirim/Buat Data Baru. Dipakai untuk Register, Login, atau Checkout Belanjaan.
Niatnya Memperbarui Total sebuah data lama. Misal ganti seluruh isi Profil KTP kamu.
Niatnya Hapus/Bakar data. Menghilangkan item dari keranjang atau hapus komentar.
📥 2. Melakukan GET Request (Ambil Barang)
Fungsi fetch() secara utuh adalah sebuah Promise. Ia secara *bawaan lahir (Default)* bertipe
GET jika kamu tidak mensettingnya sama sekali. Karena ia adalah perjalanan berwaktu, kita wajib
menggabungkannya dengan async / await.
// Fungsi memanggil katalog produk (GET)
async function ambilKatalogBuku() {
try {
// 1. Kurir dikirim ke alamat server
const respon = await fetch('https://api.toko.com/buku');
// 2. Keamanan: Cek apakah paketnya diterima atau servernya sedang down (404/500)
if (!respon.ok) {
throw new Error("Waduh server error atau nge-down!");
}
// 3. Kerdus paketnya dibuka, isinya diterjemahkan jadi object JSON JS
const dataBuku = await respon.json();
console.log("Data Berhasil Diambil:", dataBuku);
} catch (error) {
// Error Handling (Internet Putus, dll)
console.error("Gagal Ambil Data:", error);
}
}
📤 3. Melakukan POST Request (Kirim Data Baru)
Ini adalah trik yang sedikit rumit: saat mengirim data Register atau Login, kamu tidak bisa sekedar melempar
alamat server. Kamu harus membekali kotak paket si kurir fetch() dengan 3 buah surat jalan rahasia:
Method, Headers, dan Body.
📦 Konfigurasi Paket POST
async function daftarMemberBaru() {
// a. Data rahasia yang mau dikirim
const formUser = {
user: "budi99",
pass: "rahasia123"
};
const kurir = await fetch('/api/register', {
// b. Surat 1: Mode Serang / Method
method: 'POST',
// c. Surat 2: Header (Kasih tau server kalau kita kirim file bertipe JSON)
headers: {
'Content-Type': 'application/json'
},
// d. Surat 3: Body / Perut Paketnya.
// WAJIB mengubah Javascript Object ke format Teks (Stringify)
body: JSON.stringify(formUser)
});
const balasan = await kurir.json();
// { status: "Sukses", pesan: "Akun Dibuat!" }
}
Kenapa butuh Stringify?
Server internet dari seluruh dunia TIDAK MENGENAL struktur data "Object / Array" milik JavaScript. Server PHP atau Golang di negara seberang akan bingung melihat kurung kurawal JS.
Satu-satunya bahasa Universal Jaringan Internet di kabel fiber optik dunia adalah Teks (String) Murni. Itulah sebabnya kotak JSON JS kita wajib dipipihkan / di-"Stringify" jadi teks panjang biasa oleh Fetch sebelum melayang ke udara.
=> "{\"user\":\"budi99\",\"pass\":\"rahasia123\"}"