Cara Menggunakan Fetch API di JavaScript untuk Request Data

Salah satu kebutuhan paling umum dalam pengembangan web modern adalah mengambil data dari server atau API eksternal. Dulu kita mengandalkan XMLHttpRequest yang cukup rumit, tapi sekarang JavaScript sudah menyediakan Fetch API — cara yang lebih bersih, modern, dan berbasis Promise untuk melakukan HTTP request. Artikel ini akan membahas cara menggunakan Fetch API dari yang paling dasar hingga penggunaan nyata.

Apa Itu Fetch API?

Fetch API adalah antarmuka bawaan browser (native) yang memungkinkan kita mengirim dan menerima data melalui jaringan. Tidak perlu install library tambahan seperti Axios — cukup gunakan fungsi fetch() yang sudah tersedia di semua browser modern.

Cara Dasar Menggunakan Fetch (GET Request)

Berikut contoh paling sederhana mengambil data dari sebuah API publik:

// GET request menggunakan Fetch API
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    // Cek apakah response berhasil
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.status);
    }
    return response.json(); // Parse JSON dari response
  })
  .then(data => {
    console.log('Data berhasil diambil:', data);
    console.log('Judul:', data.title);
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });

Fungsi fetch() mengembalikan Promise. Kita gunakan .then() untuk menangani response, dan .catch() untuk menangkap error. Perhatikan bahwa kita perlu memanggil response.json() untuk mengubah response body menjadi objek JavaScript yang bisa kita pakai.

Menggunakan Async/Await dengan Fetch

Cara yang lebih modern dan mudah dibaca adalah menggunakan async/await:

async function ambilData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const posts = await response.json();
    console.log(`Berhasil mengambil ${posts.length} post`);

    // Tampilkan 3 post pertama
    posts.slice(0, 3).forEach(post => {
      console.log(`- ${post.title}`);
    });

  } catch (error) {
    console.error('Gagal mengambil data:', error.message);
  }
}

ambilData();

POST Request dengan Fetch

Tidak hanya GET, kita juga bisa mengirim data ke server menggunakan metode POST. Kita perlu menambahkan opsi kedua pada fungsi fetch():

async function kirimData() {
  const dataBaru = {
    title: 'Belajar Fetch API',
    body: 'Fetch API sangat mudah digunakan.',
    userId: 1
  };

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(dataBaru) // Ubah objek jadi string JSON
    });

    if (!response.ok) {
      throw new Error('Gagal mengirim data');
    }

    const result = await response.json();
    console.log('Data berhasil dikirim! ID baru:', result.id);

  } catch (error) {
    console.error('Error:', error.message);
  }
}

kirimData();

Mengirim Request dengan Header Kustom (Authorization)

Saat bekerja dengan API yang membutuhkan autentikasi, kita perlu menambahkan header Authorization:

async function ambilDataPrivat(token) {
  const response = await fetch('https://api.contoh.com/data-saya', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  });

  if (response.status === 401) {
    throw new Error('Token tidak valid atau sudah kadaluarsa');
  }

  return await response.json();
}

Menampilkan Data ke Halaman HTML

Berikut contoh nyata menampilkan data dari API ke halaman web:

async function tampilkanPosts() {
  const container = document.getElementById('post-container');
  container.innerHTML = '<p>Memuat data...</p>';

  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    const posts = await response.json();

    container.innerHTML = posts.map(post => `
      <div class="card">
        <h3>${post.title}</h3>
        <p>${post.body}</p>
      </div>
    `).join('');

  } catch (error) {
    container.innerHTML = `<p style="color:red">Error: ${error.message}</p>`;
  }
}

document.addEventListener('DOMContentLoaded', tampilkanPosts);

Perbedaan response.json(), response.text(), dan response.blob()

• response.json() — digunakan untuk data dalam format JSON (paling umum).
• response.text() — digunakan untuk data teks biasa atau HTML.
• response.blob() — digunakan untuk data biner seperti gambar atau file.

Kesimpulan

Fetch API adalah cara modern dan standar untuk melakukan HTTP request di JavaScript tanpa library tambahan. Dengan memahami cara GET dan POST request, menangani error, serta menggunakan async/await, kamu sudah siap mengintegrasikan API ke dalam proyek web kamu. Latihan terbaik adalah mencoba langsung dengan API publik seperti JSONPlaceholder untuk membiasakan diri sebelum menggunakan API sungguhan.