Menggunakan Fetch API untuk Mengambil Data dari Server

Pernahkah Anda membuat aplikasi web yang perlu menampilkan data dari server—seperti daftar produk, komentar, atau cuaca—tetapi bingung bagaimana caranya mengambil data tersebut?

Banyak pemula di dunia JavaScript merasa kesulitan saat pertama kali harus “berkomunikasi” dengan server. Mereka mungkin mendengar istilah seperti AJAX, HTTP request, atau API endpoint, tapi tidak tahu dari mana harus mulai.

Jika itu yang Anda rasakan, tenang saja. Artikel ini akan membantu Anda memahami cara menggunakan Fetch API, fitur bawaan JavaScript modern yang memudahkan pengambilan data dari server dengan sintaks sederhana dan fleksibel.

Dalam artikel ini, Anda akan mempelajari:

• Apa itu Fetch API dan mengapa penting.
• Cara dasar menggunakan Fetch untuk GET data dari server.
• Bagaimana mengirim data (POST request) ke server.
• Tips dan praktik terbaik agar tidak salah langkah.

Apa Itu Fetch API?

Fetch API adalah fitur JavaScript modern yang digunakan untuk mengambil (fetch) atau mengirim data ke server menggunakan protokol HTTP.

Sebelum adanya Fetch, kita biasa menggunakan XMLHttpRequest yang sintaksnya lebih rumit. Dengan Fetch API, proses komunikasi antara frontend dan backend menjadi jauh lebih mudah, lebih bersih, dan berbasis Promise (konsep pemrograman asinkron di JavaScript).

1. Mengambil Data dari Server (GET Request)

Langkah pertama, mari kita lihat bagaimana cara menggunakan Fetch untuk mengambil data dari sebuah API.

Contoh sederhana:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())  // ubah response ke format JSON
  .then(data => console.log(data))    // tampilkan data di console
  .catch(error => console.error('Terjadi kesalahan:', error));

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())  // ubah response ke format JSON
  .then(data => console.log(data))    // tampilkan data di console
  .catch(error => console.error('Terjadi kesalahan:', error));

Penjelasan:

• fetch(url) → Mengirim permintaan ke server.
• .then(response => response.json()) → Mengubah hasilnya menjadi format JSON.
• .then(data => ...) → Mengolah data yang sudah diterima.
• .catch(error => ...) → Menangani kesalahan jika permintaan gagal.

2. Mengirim Data ke Server (POST Request)

Selain mengambil data, Fetch juga bisa digunakan untuk mengirim data ke server. Misalnya, ketika pengguna mengisi formulir atau menambahkan komentar.

Berikut contoh penggunaan POST request:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Artikel Baru',
    body: 'Ini adalah contoh kiriman menggunakan Fetch API.',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('Data berhasil dikirim:', data))
  .catch(error => console.error('Terjadi kesalahan:', error));

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Artikel Baru',
    body: 'Ini adalah contoh kiriman menggunakan Fetch API.',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('Data berhasil dikirim:', data))
  .catch(error => console.error('Terjadi kesalahan:', error));

Penjelasan:

• method: 'POST' → Menentukan jenis permintaan.
• headers → Menetapkan tipe konten (biasanya JSON).
• body → Isi data yang ingin dikirim, dikonversi ke JSON dengan JSON.stringify().

3. Menggunakan Fetch dengan Async/Await

Agar kode lebih rapi dan mudah dibaca, Anda bisa menggunakan Fetch dengan sintaks modern async/await:

Contoh:

async function ambilData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Gagal mengambil data:', error);
  }
}

ambilData();

async function ambilData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Gagal mengambil data:', error);
  }
}

ambilData();

4. Menangani Error dan Status HTTP

Fetch tidak otomatis menandai HTTP error (seperti 404 atau 500) sebagai error di .catch(). Jadi Anda perlu mengecek response.ok untuk memastikan permintaan berhasil:

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Kesalahan:', error.message));

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Kesalahan:', error.message));

Sekarang Anda sudah memahami cara menggunakan Fetch API untuk mengambil maupun mengirim data dari server. Fetch adalah pondasi penting dalam pengembangan web modern — terutama jika Anda ingin belajar React, Vue, atau Next.js.

Jika Anda ingin melangkah lebih jauh, baca juga artikel berikutnya: [Memahami Asynchronous JavaScript dan Promise dengan Mudah]. Atau, berlangganan newsletter kami untuk mendapatkan update tutorial JavaScript terbaru setiap minggu!