Jago JavaScript 3 #2: Berkenalan dengan Fetch API (Cara Ambil Data)

fetch() adalah fungsi bawaan browser untuk meminta data ke server. Bayangkan fetch() itu seperti kurir yang kamu suruh pergi ke sebuah alamat (URL), nunggu paketnya siap, lalu bawain paket itu balik ke kamu.

🧩 Apa yang Akan Dipelajari

• Memahami struktur dasar fungsi fetch().
• Mengubah response mentah menjadi data JSON yang bisa dibaca.
• Menggunakan Async/Await agar proses pengambilan data lebih rapi.
• Mencoba mengambil data dari API publik (JSONPlaceholder).

⚙️ Persiapan

• Browser Chrome/Edge.
• Koneksi Internet (wajib, karena kita bakal akses server luar).
• Console Browser (F12).

🚀 Langkah-Langkah

1. Struktur Dasar fetch

Cara paling simpel pakai fetch adalah dengan .then(). Tapi ingat, fetch itu gak langsung ngasih data, dia ngasih "Response" dulu.

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json()) // Ubah paket mentah jadi JSON
  .then(data => console.log(data))   // Baru deh dapet datanya
  .catch(error => console.log('Error:', error));

2. Gaya Modern: Fetch dengan Async/Await

Seperti yang sudah kita bahas, async/await bikin kode kita jauh lebih enak dibaca daripada tumpukan .then().

async function ambilDataUser() {
    // 1. Panggil kurirnya (fetch)
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    
    // 2. Buka paketnya (convert ke json)
    const data = await response.json();
    
    // 3. Pakai datanya
    console.log(`Nama User: ${data.name}`);
    console.log(`Email: ${data.email}`);
}

ambilDataUser();

3. Memahami Objek Response

Kurir kita (fetch) gak cuma bawain barang, dia juga bawa info status perjalanannya. Kita bisa cek apakah permintaannya sukses atau gagal lewat properti ok atau status.

• Status 200: OK (Berhasil).
• Status 404: Not Found (Alamat gak ketemu).
• Status 500: Server Error (Dapur server lagi kebakaran).

const response = await fetch('https://url-salah.com');
console.log(response.status); // Contoh: 404

4. Praktek: Ambil Daftar Postingan

Yuk, coba ambil data banyak (Array of Objects) dari API gratisan.

async function tampilkanPost() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=3');
    const posts = await response.json();

    posts.forEach(post => {
        console.log(`Judul: ${post.title}`);
        console.log(`Isi: ${post.body}`);
        console.log('---');
    });
}

tampilkanPost();

💡 Tips Tambahan

• URL API: Selalu cek dokumentasi API yang kamu pakai. Beberapa API butuh "API Key" agar permintaannya dikabulkan.
• Network Tab: Klik F12, lalu buka tab Network. Kamu bisa lihat detail "telponan" antara browser kamu dan server di sana. Berguna banget buat debugging!
• Default Method: Kalau kamu cuma nulis fetch(url), secara otomatis dia melakukan metode GET (mengambil data).

❗ Troubleshooting

Masalah: Muncul error CORS Policy: No 'Access-Control-Allow-Origin' header.... Solusi: Ini adalah fitur keamanan browser. Artinya, server yang kamu tembak melarang website lain mengambil datanya secara sembarangan. Solusinya adalah menggunakan API yang memang dibuka untuk publik atau mengatur izin di sisi server (kalau kamu yang punya servernya).

🎯 Kesimpulan

Kamu sekarang sudah bisa "menembak" server luar dan membawa datanya pulang ke website kamu. fetch adalah jembatan utamanya, dan async/await adalah cara terbaik untuk mengontrol alurnya.