Fetch: POST, PUT, dan DELETE

GET hanya mengambil data. Aplikasi sungguhan juga perlu mengirim data: mendaftar akun, menambah produk ke keranjang, mengedit profil, menghapus komentar. Untuk itu kamu butuh method HTTP lain: POST (buat baru), PUT/PATCH (ubah), dan DELETE (hapus).

Kenapa method-method ini ada

HTTP dirancang dengan "kata kerja" yang bermakna. GET berarti "ambilkan", POST berarti "buatkan yang baru", PUT berarti "ganti seluruhnya", PATCH berarti "ubah sebagian", DELETE berarti "hapus". Server membaca method ini untuk tahu maksudmu, sama seperti kamu membedakan "pinjam" dan "minta" dalam bahasa sehari-hari. Memakai method yang tepat membuat API bisa dipahami siapa pun.

Anatomi request tulis: method, headers, body

Berbeda dengan GET, request tulis butuh object konfigurasi sebagai argumen kedua fetch:

async function tambahUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: "Budi Santoso",
      email: "[email protected]",
    }),
  });
  if (!response.ok) throw new Error(`Gagal: ${response.status}`);
  const hasil = await response.json();
  console.log("User baru:", hasil);
}
tambahUser();

Tiga bagian penting: method menyatakan kata kerjanya, headers memberi tahu server bahwa body-nya JSON (Content-Type: application/json), dan body adalah datanya. Body harus string, makanya object diubah dulu dengan JSON.stringify. Lupa stringify adalah error paling umum di sini, server akan menerima [object Object] yang tidak berguna.

PUT dan DELETE dalam satu pola

Setelah paham POST, yang lain hanya variasi. PUT mengganti data pada URL spesifik, DELETE menghapusnya:

// PUT: ganti data user id 1 seluruhnya
async function gantiUser(id, dataBaru) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${id}`,
    {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(dataBaru),
    }
  );
  if (!response.ok) throw new Error(`Gagal: ${response.status}`);
  return response.json();
}

// DELETE: hapus user id 1 (tidak butuh body)
async function hapusUser(id) {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/users/${id}`,
    { method: "DELETE" }
  );
  if (!response.ok) throw new Error(`Gagal: ${response.status}`);
  console.log(`User ${id} dihapus (status ${response.status})`);
}

Perhatikan: DELETE tidak mengirim body, dan responsnya sering kosong atau minimal. Jangan kaget kalau response.json() pada hasil DELETE melempar error karena body-nya kosong, cukup cek statusnya.

Contoh realistis: form tambah anggota ekstrakurikuler

document.getElementById("form-anggota").addEventListener("submit", async (e) => {
  e.preventDefault();
  const nama = document.getElementById("nama").value;
  const divisi = document.getElementById("divisi").value;

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: nama, divisi }),
    });
    if (!response.ok) throw new Error(`Server: ${response.status}`);
    const tersimpan = await response.json();
    alert(`Berhasil! ID anggota baru: ${tersimpan.id}`);
  } catch (error) {
    alert("Gagal menyimpan: " + error.message);
  }
});

Ini alur standar form web: cegah reload halaman, ambil nilai input, kirim sebagai JSON, beri feedback ke user. Pola ini dipakai di hampir semua form modern.

Jebakan umum

1. jsonplaceholder itu API palsu untuk latihan. POST/PUT/DELETE di sana mengembalikan respons seolah berhasil, tapi datanya tidak benar-benar tersimpan. Jangan panik kalau data "hilang" setelah refresh, itu memang perilakunya.
2. PUT vs PATCH. PUT mengganti seluruh resource (field yang tidak dikirim dianggap kosong), PATCH hanya mengubah field yang dikirim. Baca dokumentasi API yang kamu pakai.
3. Header Content-Type wajib untuk JSON. Tanpa itu, banyak server menolak atau salah menafsirkan body.
4. Jangan kirim password atau token lewat URL query pada request tulis. Pakai body atau header Authorization.