WEB FETCH API

Fetch API merupakan fitur dalam JavaScript yang digunakan untuk melakukan permintaan HTTP, seperti GET, POST, dan lainnya, kepada server. Fetch API merupakan cara modern yang menggantikan XMLHttpRequest dalam melakukan AJAX.

Menggunakan Fetch API

Fetch API dapat digunakan dengan sangat mudah. Pertama-tama cukup panggil fungsi fetch(), kemudian masukkan URL dari API yang ingin kamu akses sebagai argumen.

Contoh penggunaan Fetch API:

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

Function fetch() akan mengembalikan Promise yang berisi Response object. Promise ini biasanya akan diikuti oleh method .then() untuk melakukan operasi terhadap respons data.

fetch('https://api.example.com/data')
.then(response => response.json()) // Mengubah respons ke dalam format JSON
.then(data => console.log(data)) // Menampilkan data ke dalam console
.catch(error => console.error('Error:', error)) // Menampilkan pesan error jika terjadi masalah

Mengirim Permintaan POST dengan Fetch API

Fetch API tidak hanya dapat digunakan untuk permintaan GET, yaitu permintaan data dari server, tetapi juga untuk permintaan POST, yaitu permintaan untuk mengirim data ke server.

Berikut adalah contoh penggunaan Fetch API untuk permintaan POST:

fetch('https://api.example.com/data', {
  method: 'POST', // Metode yang digunakan
  headers: { 'Content-Type': 'application/json' }, // Mengatur tipe konten
  body: JSON.stringify({key: 'value'}) // Mengirim data dalam format JSON
})

Hal yang perlu diingat adalah saat mengirim data ke server menggunakan Fetch API, data tersebut harus dikonversi menjadi format JSON dengan JSON.stringify().

Menangani Respons Fetch API

Seperti yang telah disebutkan sebelumnya, fungsi fetch() mengembalikan sebuah Promise, yang berarti kamu harus menulis kode untuk menangani hasilnya, baik berhasil (dijalankan dalam blok .then()) atau gagal (dijalankan dalam blok .catch()).

Berikut adalah contoh cara menangani respons dari Fetch API:

fetch('https://api.example.com/data')
.then(response => {
  if (!response.ok) { // Jika status respons bukan OK
    throw new Error('Network response was not ok') // Membuat error baru
  }
  return response.json() // Jika status respons OK, proses data
})
.then(data => console.log(data)) // Menampilkan data
.catch(error => console.log('There has been a problem with your fetch operation: ', error.message)) // Menampilkan error jika terjadi masalah

Dengan pengetahuan ini, kamu dapat memanfaatkan Web Fetch API dalam JavaScript untuk melakukan permintaan HTTP dan memanipulasi responsnya.