JavaScript Academy · Pelajaran

POST dan Mengirim Data

Kirim payload JSON dengan opsi permintaan.

POST dan Mengirim Data adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengirimkan Data ke Server

Untuk membuat atau memperbarui data, Anda mengirimkan permintaan dengan isi. Fetch mendukungnya melalui objek opsi yang diteruskan sebagai argumen kedua.

Menetapkan Metode

Atur method ke kata kerja HTTP yang Anda perlukan: POST untuk membuat, PUT/PATCH untuk memperbarui, dan DELETE untuk menghapus.

fetch(url, { method: "POST" });

Menambahkan Isi JSON

Sebagian besar API mengharapkan JSON. Ubah objek Anda menjadi string dengan JSON.stringify, lalu masukkan ke dalam body.

fetch(url, {
  method: "POST",
  body: JSON.stringify({ name: "Ada", age: 36 })
});

Header Content-Type

Beri tahu server bahwa isi berupa JSON dengan menetapkan Content-Type: application/json. Tanpa ini, server mungkin salah membaca muatan tersebut.

fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" })
});

Membaca Respons

Server biasanya membalas dengan sumber daya yang dibuat. Bacalah dengan cara yang sama seperti GET, menggunakan response.json().

const response = await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(payload)
});
const created = await response.json();

Fungsi Pembuatan Lengkap

Bungkus pola ini menjadi fungsi yang dapat digunakan kembali. Fungsi ini menerima data, mengirimkannya, lalu mengembalikan respons server.

async function createUser(data) {
  const res = await fetch("/api/users", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  return res.json();
}

PUT dan PATCH

Gunakan PUT untuk mengganti seluruh sumber daya dan PATCH untuk memperbarui beberapa bidang saja. Bentuk isi permintaan akan berbeda sesuai penggunaannya.

fetch("/api/users/7", {
  method: "PATCH",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ age: 37 })
});

Mengirim Data Formulir

Untuk mengunggah berkas atau mengirim formulir, gunakan objek FormData sebagai isi permintaan. Jangan mengatur Content-Type sendiri; browser akan menambahkan batas multipart yang benar.

const form = new FormData();
form.append("avatar", fileInput.files[0]);
fetch("/upload", { method: "POST", body: form });

Autentikasi

Titik akhir yang dilindungi memerlukan kredensial. Kirim token dalam header Authorization bersama Content-Type.

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + token
  },
  body: JSON.stringify(data)
});

Cookie dan Kredensial

Secara bawaan, fetch tidak mengirim cookie lintas asal. Atur credentials: "include" ketika server menggunakan sesi berbasis cookie.

fetch(url, { method: "POST", credentials: "include", body: payload });

Kekeliruan Stringifikasi

Ingat: body harus berupa string (atau FormData/Blob). Mengirim objek mentah akan menghasilkan [object Object]. Selalu gunakan JSON.stringify pada objek terlebih dahulu.

body: JSON.stringify({ ok: true }) // correct
// body: { ok: true }  <-- broken

Pemeriksaan Singkat

Mengirim JSON dengan POST.

Ringkasan

Kirim data dengan mengatur method, body, dan header. Untuk JSON, gunakan JSON.stringify pada objek dan atur Content-Type: application/json. Gunakan FormData untuk unggahan (tanpa mengatur Content-Type secara manual), tambahkan Authorization untuk autentikasi, dan gunakan credentials: "include" untuk cookie. Baca balasannya dengan response.json().

Pertanyaan yang Sering Diajukan

Apakah pelajaran “POST dan Mengirim Data” gratis?

Ya — teks lengkap “POST dan Mengirim Data” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “POST dan Mengirim Data”?

Kirim payload JSON dengan opsi permintaan. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “POST dan Mengirim Data” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Membuat Permintaan GET
POST dan Mengirim Data
Menangani Error dan Kode Status
Membatalkan Permintaan dengan AbortController

← Kembali ke JavaScript Academy