• Apa Itu Fetch API?
• Contoh Penggunaan di Alpine.js
• Menangani Error dan Validasi
• Mengirim Data (POST)
• Kesimpulan

Halo teman-teman semuanya, di artikel sebelumnya kita sudah belajar bagaimana cara melakukan interaksi antar komponen di Alpine.js. Nah, sekarang saatnya kita naik level lagi dengan membahas cara mengambil data dari server menggunakan Fetch API di Alpine.js.

Fetch API memungkinkan kita untuk melakukan permintaan HTTP (seperti GET, POST, dll.) ke server dari dalam browser.

Fitur ini sangat penting jika kita ingin membuat aplikasi web yang dinamis, misalnya menampilkan data produk dari API, mengambil komentar dari database, atau mengirim form ke server.

Apa Itu Fetch API?

Fetch API adalah fitur bawaan JavaScript modern yang digunakan untuk berkomunikasi dengan server melalui HTTP. Di Alpine.js, kita bisa menggunakannya langsung di dalam fungsi yang didefinisikan di x-data.

Contoh dasar penggunaan Fetch:

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

Contoh Penggunaan di Alpine.js

Berikut contoh menampilkan daftar pengguna dari API publik menggunakan Alpine.js:

<div x-data="fetchPengguna()" x-init="ambilData()">
  <template x-if="loading">
    <p>Loading data...</p>
  </template>

  <template x-if="!loading">
    <ul>
      <template x-for="user in users" :key="user.id">
        <li x-text="user.name"></li>
      </template>
    </ul>
  </template>
</div>

<script>
  function fetchPengguna() {
    return {
      users: [],
      loading: true,
      async ambilData() {
        try {
          const res = await fetch('https://jsonplaceholder.typicode.com/users');
          const data = await res.json();
          this.users = data;
        } catch (e) {
          console.error('Gagal mengambil data:', e);
        } finally {
          this.loading = false;
        }
      }
    }
  }
</script>

Penjelasan:

• x-data="fetchPengguna()" adalah fungsi yang berisi state dan method
• x-init="ambilData()" akan otomatis dijalankan saat komponen dimuat
• loading digunakan untuk menampilkan indikator loading
• x-for digunakan untuk menampilkan daftar pengguna

Menangani Error dan Validasi

Jangan lupa tambahkan penanganan error agar aplikasi tetap responsif dan tidak blank saat terjadi masalah:

catch (e) {
  console.error('Gagal mengambil data:', e);
  alert('Terjadi kesalahan saat mengambil data.');
}

Mengirim Data (POST)

Kalau kita ingin mengirim data ke server, kita bisa gunakan method POST:

await fetch('https://api.example.com/kirim', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ nama: 'Alpine User' })
});

Kesimpulan

Di artikel ini, kita sudah belajar bagaimana menggunakan Fetch API di Alpine.js untuk mengambil dan mengirim data dari/ke server.

Di seri selanjutnya, kita akan bahas tentang Menggunakan Plugin di Alpine.js, supaya kita bisa memperluas fitur dengan lebih mudah.

Terima Kasih