Cara Mudah Menguasai Fetch API di JavaScript untuk Pemula

Yo, gaes! Pernah nggak sih kalian ngerasa penasaran gimana caranya website kayak Instagram atau Twitter bisa nampilin data yang up-to-date tanpa perlu refresh halaman? Rahasianya ada di Fetch API. Ini adalah senjata rahasia buat para web developer buat "ngobrol" sama server.

Yuk, kita spill cara pakainya biar codingan kalian makin vibes-nya pro!

Apa Itu Fetch API?

Singkatnya, Fetch API itu cara modern di JavaScript buat ngambil (GET) atau ngirim (POST) data ke server. Dulu orang pakai XMLHttpRequest yang ribetnya minta ampun, tapi sekarang Fetch udah built-in dan pake sistem Promise yang bikin kode kalian jauh lebih bersih.

1. Ambil Data (GET)

Mau ambil data dari API publik? Gampang banget, ngab! Tinggal panggil fungsi fetch() terus urus response-nya.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // Ubah response ke format JSON
  .then(data => console.log('Data berhasil di-spill:', data))
  .catch(error => console.error('Yah, ada error nih:', error));

2. Kirim Data (POST)

Kalau mau ngirim data, kita perlu nambahin config object biar server tahu apa yang kita kirim. Skuy, perhatiin kodenya:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Belajar Fetch',
    body: 'Ternyata gampang banget!',
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log('Success kirim data:', data));

Tips Biar Makin Pro: Pake Async/Await

Cara di atas pakai .then() emang oke, tapi kalau logic-nya makin kompleks, kodenya bisa jadi "neraka callback". Mending pake async/await biar kodenya lebih readable alias enak dibaca.

async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) throw new Error('Gagal ambil data!');
    
    const users = await response.json();
    console.log(users);
  } catch (err) {
    console.log('Error-nya:', err);
  }
}

getData();

Hal Penting yang Wajib Kamu Tau:

• Response.ok: Fetch nggak bakal otomatis nge-trigger catch kalau status server 404 atau 500. Jadi, selalu cek if (!response.ok) buat nangkap error dari server.
• JSON.stringify(): Jangan lupa ubah object JavaScript kamu jadi string sebelum dikirim ke body.
• CORS: Kalau nanti kena error CORS, itu urusan server, jangan panik dulu ya!

Gimana, gampang kan? Sekarang kalian udah punya skill buat bikin aplikasi yang dinamis. Jangan lupa praktek langsung biar makin jago. Happy coding, gaes!