Fetch POST: Mengirim Data ke API

Mengirim data butuh body

Saat mengambil data kamu cukup butuh URL. Saat mengirim data, kamu butuh dua tambahan: method yang tepat dan body berisi datanya. Untuk data terstruktur, format standarnya JSON:

async function buatArtikel(judul, isi) {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ title: judul, body: isi, userId: 1 }),
  });

  if (!res.ok) {
    throw new Error("Gagal menyimpan: " + res.status);
  }
  const hasil = await res.json();
  console.log("Artikel baru id:", hasil.id);
  return hasil;
}

Tiga hal yang tidak boleh terlewat: method: "POST", header Content-Type: application/json, dan body yang sudah diubah jadi string lewat JSON.stringify. Lupa salah satunya adalah sumber error paling umum. Kalau Content-Type tidak diisi, server tidak tahu body-mu itu JSON dan biasanya membalas 400 atau 415.

Membaca respons setelah POST

Server yang baik membalas POST sukses dengan status 201 Created plus data yang baru dibuat (termasuk id barunya). Manfaatkan respons ini: langsung tambahkan item baru ke tampilan tanpa me-request ulang seluruh daftar. Ini membuat aplikasimu terasa jauh lebih responsif.

Mengirim file? Pakai FormData

JSON tidak cocok untuk file biner seperti foto. Untuk upload, pakai objek FormData. Browser otomatis mengatur Content-Type menjadi multipart/form-data lengkap dengan boundary-nya, jadi jangan set header Content-Type secara manual di sini:

async function uploadFoto(file) {
  const form = new FormData();
  form.append("foto", file);
  form.append("keterangan", "Foto profil baru");

  const res = await fetch("https://api.example.com/upload", {
    method: "POST",
    body: form, // tanpa header Content-Type manual
  });

  if (!res.ok) throw new Error("Upload gagal: " + res.status);
  return res.json();
}

FormData juga cocok untuk form HTML biasa: new FormData(formElement) langsung mengambil semua input dalam form.

PUT dan PATCH memakai pola yang sama

Setelah menguasai POST, PUT dan PATCH tidak ada bedanya dari sisi kode: sama-sama mengirim method, Content-Type: application/json, dan body hasil JSON.stringify. Bedanya cuma semantik: PUT ke /api/artikel/42 berarti "ganti seluruh artikel 42 dengan data ini", sedangkan PATCH berarti "ubah hanya field yang saya kirim". Kalau API-mu cuma butuh update nama, kirim PATCH dengan body kecil { "nama": "Baru" } saja, lebih hemat dan lebih jelas maksudnya.

Catatan teknis: Request POST dengan Content-Type: application/json ke domain berbeda memicu preflight: browser diam-diam mengirim request OPTIONS dulu untuk bertanya "boleh tidak?" ke server. Kalau server tidak menjawab preflight dengan header CORS yang tepat, request aslimu tidak pernah dikirim dan kamu melihat error CORS. Ini bukan bug di kodemu, ini mekanisme keamanan browser, dan solusinya ada di konfigurasi server.