Jago JavaScript 3 #4: Memahami HTTP Methods (Gak Cuma Ambil Data!)

Bayangkan kamu lagi ngelola database perpustakaan lewat API. Kamu butuh cara berbeda buat nyari buku, nambahin buku baru, ganti judul buku, atau buang buku yang rusak.

🧩 Apa yang Akan Dipelajari

Memahami 4 metode utama: GET, POST, PUT, DELETE.
Cara mengirim data (Body) menggunakan fetch().
Mengatur Headers agar server tahu kita ngirim JSON.
Simulasi interaksi penuh dengan server.

🚀 4 Kata Kerja Utama API

1. GET (Mengambil Data)

Ini yang sudah kita lakukan. Ibaratnya: "Halo Server, boleh minta daftar buku?"

Sifat: Aman & Read-only. Tidak merubah apa pun di server.

2. POST (Mengirim/Membuat Data Baru)

Ibaratnya: "Halo Server, ini ada buku baru, tolong simpan ya!"

Penggunaan: Daftar akun baru, kirim postingan, tambah item ke keranjang.

3. PUT / PATCH (Mengubah Data)

Ibaratnya: "Halo Server, buku ID #12 judulnya salah, tolong ganti jadi ini ya."

PUT: Mengganti seluruh data.
PATCH: Cuma update bagian yang spesifik saja.

4. DELETE (Menghapus Data)

Ibaratnya: "Halo Server, tolong hapus buku ID #12, sudah hilang."

💻 Praktek dengan Fetch API

Untuk POST, PUT, dan DELETE, kita perlu nambahin "surat pengantar" (Options) di dalam fungsi fetch().

Contoh POST: Menambah User Baru

async function tambahUser() {
    const dataBaru = {
        name: "Kay",
        username: "kay_dev",
        email: "kay@example.com"
    };

    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
        method: 'POST', // Tentukan metodenya
        body: JSON.stringify(dataBaru), // Ubah object ke teks JSON
        headers: {
            'Content-type': 'application/json; charset=UTF-8', // Kasih tahu server kalau ini JSON
        },
    });

    const hasil = await response.json();
    console.log("Berhasil nambah:", hasil);
}

Contoh DELETE: Menghapus Data

async function hapusUser(id) {
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
        method: 'DELETE',
    });

    if (response.ok) {
        console.log(`User ID ${id} berhasil dihapus!`);
    }
}

💡 Tips Tambahan

Headers Itu Wajib: Kalau kamu kirim data tapi lupa naruh headers: { 'Content-type': 'application/json' }, server biasanya bakal bingung dan nolak permintaanmu.
Status Code:
- 201 Created: Biasanya muncul kalau POST sukses.
- 204 No Content: Biasanya muncul kalau DELETE sukses.
REST API: Arsitektur API yang pakai metode-metode ini secara teratur disebut REST API.

❗ Troubleshooting

Masalah: Kenapa pas saya DELETE atau POST, data di website aslinya gak berubah? Solusi: Karena kita pakai JSONPlaceholder (API Dummy/Palsu). Mereka cuma "pura-pura" sukses biar kita bisa belajar. Kalau mau beneran berubah, kamu harus punya database dan server sendiri (nanti di materi Backend!).

🎯 Kesimpulan

HTTP Methods bikin komunikasi kamu sama server jadi lebih jelas tujuannya. Kamu gak cuma bisa baca, tapi bisa "nulis" dan "bersih-bersih" data di internet. Gabungkan ini dengan Event Listener klik tombol, dan kamu bisa bikin sistem CRUD (Create, Read, Update, Delete) yang lengkap!