CARA FETCH API JAVASCRIPT

Pemrograman web memerlukan banyak interaksi dengan API, tidak peduli seberapa kecil atau besar aplikasinya. Fetch API adalah interface yang memungkinkanmu untuk membuat permintaan HTTP dalam JavaScript. Fetch API memberikan fungsionalitas yang kuat dan fleksibel dalam mengambil sumber daya dari jaringan.

Sebenarnya, Fetch API adalah salah satu fitur yang paling sering digunakan oleh developer dalam pengembangan aplikasi web berbasis JavaScript. Mari kita pelajari cara mengambil (fetch) API menggunakan JavaScript.

Mulai Fetch API

Jika Anda pernah menggunakan XMLHttpRequest sebelumnya, Fetch mungkin tampak agak akrab. Namun, Fetch menawarkan fungsionalitas lebih lanjut dan kegunaan yang lebih baik. Untuk memulai, kita akan melihat syntax penggunaan dasar Fetch.

Mengambil Sumber Daya

Contoh berikut menunjukkan cara paling sederhana untuk melakukan fetch API di Javascript:

fetch('https://api.example.com/items')

Fetch API memberikan janji (Promise), yang dapat kita gunakan untuk mengekstrak respons. Karena membutuhkan waktu untuk menerima respons, kita akan menggunakan then() untuk menangani respons tersebut setelah diterima.

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

Ketika kita memanggil response.json(), ini sebenarnya mengembalikan Promise lain yang kita kemudian dapat membaca datanya dengan .then()

Mengirim Permintaan POST

Tidak hanya mengambil data, kamu juga dapat mengirim data menggunakan Fetch API. Berikut adalah contoh bagaimana melakukannya:

fetch('https://api.example.com/items', {
  method: 'POST',
  body: JSON.stringify({
    name: 'Item baru'
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(response => response.json())
.then(json => console.log(json))
.catch(error => console.error('Error:', error));

Jadi, dengan menggunakan Fetch API di Javascript, kamu dapat dengan mudah mengambil dan mengirim data ke API. Kamu dapat memanfaatkannya untuk membangun aplikasi web yang dinamis dan responsif. Semoga panduan ini membantu kamu memahami bagaimana cara menggunakan Fetch API dalam Javascript!