FETCH API PADA JAVASCRIPT

Fetch API adalah salah satu fitur JavaScript yang memudahkan pengambilan data dari server secara asinkron. Ini merupakan cara modern yang menggantikan XMLHttpRequest dan lebih mudah digunakan.

Cara Menggunakan Fetch API

Untuk menggunakan Fetch API, kamu hanya perlu memanggil fungsi fetch dan memberikan URL endpoint yang ingin diakses.

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

Penjelasan Kode

1. fetch('https://api.example.com/data'): Panggil fungsi fetch dengan URL endpoint.
2. .then(response => response.json()): Ubah response menjadi JSON.
3. .then(data => console.log(data)): Tampilkan data di console.
4. .catch(error => console.error('Error:', error)): Tangani error jika ada.

Mengirim Data dengan Fetch API

Fetch API tidak hanya digunakan untuk mengambil data tetapi juga untuk mengirim data ke server dengan metode POST.

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Penjelasan Tambahan

• method: 'POST': Tentukan metode HTTP POST.
• headers: Tentukan jenis konten yang dikirim.
• body: Data yang akan dikirim, dalam bentuk JSON.

Kelebihan Fetch API

• Sederhana dan Modern: Mudah digunakan dibandingkan dengan XMLHttpRequest.
• Promise-Based: Memanfaatkan Promise, sehingga lebih mudah untuk penanganan asinkron.

Kesimpulan

Fetch API merupakan alat yang powerful dalam JavaScript untuk berinteraksi dengan server. Dengan menggunakan Fetch API, proses pengambilan dan pengiriman data menjadi lebih mudah dan efisien. Tidak hanya itu, kode kamu akan menjadi lebih bersih dan lebih mudah dibaca.