Fetch POST: Mengirim Data ke API

Mengirim paket lewat kurir

Kalau GET adalah meminta brosur, POST adalah mengirim paket: kamu menyiapkan isi paket (body), menulis alamat (URL), dan menempel label (header). Di fetch(), semua itu diatur lewat objek options sebagai argumen kedua.

Kenapa pola ini penting

Hampir semua interaksi user menghasilkan POST: daftar, login, komentar, checkout. Menguasai pola ini berarti menguasai setengah dari pekerjaan frontend sehari-hari. Dan karena POST mengubah data di server, pola yang benar juga melindungimu dari bug duplikasi data.

Contoh 1: POST JSON standar

const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Belajar HTTP",
    body: "Seru sekali",
    userId: 1
  })
});

const data = await response.json();
console.log(data.id);

Perhatikan tiga hal: method ditulis eksplisit, Content-Type wajib ada agar server tahu ini JSON, dan body harus string (makanya JSON.stringify). Lupa stringify adalah error nomor satu: server menerima [object Object] yang tidak berguna.

Contoh 2: menangani hasil dengan benar

try {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "Halo" })
  });

  if (response.status === 201) {
    const data = await response.json();
    console.log("Berhasil dibuat, id:", data.id);
  } else {
    const err = await response.json();
    console.log("Server menolak:", err.error);
  }
} catch (e) {
  console.log("Network gagal total:", e.message);
}

Pola lengkapnya: try/catch untuk kegagalan network, cek status untuk kegagalan HTTP, baca body error agar pesan ke user informatif. Tiga lapis pertahanan ini yang membedakan aplikasi asal jadi dengan aplikasi profesional.

Kesalahan umum

Salah: lupa JSON.stringify pada body. Body harus string; objek mentah menjadi [object Object]. Yang benar: selalu stringify untuk JSON.

Salah: tidak menonaktifkan tombol submit saat loading. User klik dua kali, dua data terkirim. Yang benar: disable tombol selama request berjalan, aktifkan lagi setelah selesai.

Salah: mengabaikan response body error. Server menjelaskan kenapa ditolak di body, tapi kode hanya menampilkan "gagal". Yang benar: baca dan tampilkan pesan error dari server (yang sudah ramah user).

Mencegah submit ganda dengan benar

Pola lengkap tombol submit yang aman:

const tombol = document.querySelector("#bayar");
tombol.addEventListener("click", async function() {
  tombol.disabled = true;
  tombol.textContent = "Memproses...";
  try {
    await kirimPembayaran();
    tampilkanSukses();
  } catch (e) {
    tampilkanError(e.message);
  } finally {
    tombol.disabled = false;
    tombol.textContent = "Bayar";
  }
});

Tiga perlindungan: tombol mati selama request (tidak bisa klik ganda), teks berubah memberi umpan balik, dan finally memastikan tombol aktif lagi baik sukses maupun gagal. Tanpa pola ini, user yang tidak sabar adalah sumber utama data duplikat.

Catatan teknis: Untuk upload file, jangan pakai JSON. Gunakan objek FormData dan JANGAN set Content-Type manual: browser akan mengisinya otomatis beserta boundary yang benar. Mengatur manual justru merusak format multipart.