Fetch API JavaScript: Mengambil dan Menampilkan Data dari Server

Fetch API JavaScript adalah fitur modern di JavaScript yang digunakan untuk mengambil data dari server atau API eksternal. Dengan Fetch, kamu bisa melakukan permintaan HTTP (GET, POST, PUT, DELETE) tanpa perlu library tambahan seperti jQuery. Contohnya, kamu bisa mengambil data pengguna, daftar produk, atau berita terbaru dari server, lalu menampilkannya langsung di halaman web.

Struktur Dasar Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Terjadi kesalahan:', error));

Penjelasan:

1. fetch(url) – Memulai permintaan ke alamat API.

2. .then(response => response.json()) – Mengubah hasil respon ke format JSON.

3. .then(data => {...}) – Mengolah data yang sudah diambil.

4. .catch(error => {...}) – Menangani error jika koneksi gagal.

Contoh: Ambil Data dari API Publik

Kita akan menggunakan API publik JSONPlaceholder, yang menyediakan data dummy (palsu) untuk latihan.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => console.error('Gagal mengambil data:', err));

Output di console (browser):

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "email": "Sincere@april.biz",
    "company": { "name": "Romaguera-Crona" }
  },
  ...
]

Menampilkan Data di Halaman Web

Kita tidak hanya ingin melihat data di console, tapi juga menampilkannya di HTML.

Contoh Lengkap:

<h2>Daftar Pengguna</h2>
<ul id="user-list"></ul>

<script>
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
    const list = document.getElementById('user-list');
    users.forEach(user => {
      const li = document.createElement('li');
      li.innerHTML = `<strong>${user.name}</strong> - ${user.email}`;
      list.appendChild(li);
    });
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });
</script>

Hasilnya:
Daftar nama dan email pengguna akan muncul otomatis di halaman web setelah data diambil dari API.

Contoh Fetch dengan Loading Indicator

Agar tampilan lebih interaktif, kamu bisa menambahkan indikator “Sedang memuat…” sebelum data tampil.

<div id="status">⏳ Mengambil data...</div>
<ul id="list"></ul>

<script>
const status = document.getElementById('status');
const list = document.getElementById('list');

fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
  .then(res => res.json())
  .then(posts => {
    status.textContent = "✅ Data berhasil diambil:";
    posts.forEach(p => {
      const li = document.createElement('li');
      li.innerHTML = `<strong>${p.title}</strong><br>${p.body}`;
      list.appendChild(li);
    });
  })
  .catch(err => {
    status.textContent = "❌ Gagal mengambil data!";
  });
</script>

Mengirim Data ke Server (POST Request)

Selain mengambil data, Fetch juga bisa mengirim data ke server, misalnya untuk membuat akun baru atau mengirim form.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'Belajar Fetch API',
    body: 'Artikel ini menjelaskan cara kerja Fetch di JavaScript.',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log('Data tersimpan:', data))
  .catch(error => console.error('Terjadi kesalahan:', error));

Catatan penting:

• Gunakan method: 'POST' untuk mengirim data baru.

• Gunakan headers agar server tahu bahwa data dikirim dalam format JSON.

• Gunakan body untuk menyertakan data yang akan dikirim.

Menangani Error dan Status Respon

Kadang API bisa gagal merespons atau mengembalikan error (seperti 404 atau 500). Gunakan pengecekan manual agar lebih aman.

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));

Fetch vs XMLHttpRequest

Fitur	Fetch API	XMLHttpRequest
Sintaks	Lebih modern & mudah dibaca	Cukup panjang dan rumit
Promise	✅ Mendukung	❌ Tidak mendukung langsung
Response Parsing	Otomatis bisa .json()	Harus manual
Error Handling	Lebih sederhana	Lebih kompleks

Fetch adalah pengganti modern untuk XMLHttpRequest yang sudah lama digunakan.

Kesimpulan

Dengan Fetch API, kamu bisa:

• Mengambil data dari API publik atau server

• Menampilkan hasilnya di halaman web

• Mengirim data kembali ke server

• Menangani error dengan mudah

Fungsi	Kegunaan
fetch(url)	Mengambil data dari server
.then(res => res.json())	Mengubah hasil menjadi JSON
.catch(err => ...)	Menangani error
method: 'POST'	Mengirim data baru ke server

Fetch API sangat penting dalam pengembangan aplikasi web dinamis dan frontend modern, terutama jika kamu berencana belajar React, Vue, atau Next.js.