Fungsi fetch() pada JavaScript: Menjalankan Permintaan HTTP dengan Mudah

Sigit N
Javascript
Fungsi fetch() pada JavaScript: Menjalankan Permintaan HTTP dengan Mudah
Konten Halaman

Dalam pengembangan web, interaksi dengan sumber daya eksternal seperti API (Application Programming Interface) menjadi hal yang umum. Untuk mengambil data dari server atau mengirim data ke server, JavaScript menyediakan berbagai metode yang dapat digunakan. Salah satu metode yang populer adalah fetch(). Dalam artikel ini, kita akan menjelajahi fungsi dan penggunaan fetch() pada JavaScript.

Apa itu fetch()?

fetch() adalah fungsi bawaan JavaScript yang memungkinkan kita melakukan permintaan HTTP secara asynchronous. Dengan kata lain, kita dapat mengambil data dari server atau mengirim data ke server tanpa harus memuat ulang halaman web. Fungsi ini mengembalikan objek Promise yang berisi respons dari permintaan HTTP yang telah kita lakukan.

Menggunakan fetch() untuk Mengambil Data

Ketika kita ingin mengambil data dari server, kita dapat menggunakan fetch() untuk membuat permintaan HTTP GET. Berikut adalah contoh penggunaan fetch() untuk mengambil data dalam format JSON:

fetch('https://www.contohapi.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Terjadi kesalahan:', error);
  });

Pada contoh di atas, kita menggunakan fetch() untuk membuat permintaan GET ke URL 'https://www.contohapi.com/data'. Kemudian, kita menggunakan method .json() pada objek respons untuk mengonversi respons ke dalam format JSON. Hasilnya kemudian diolah dalam blok then() dan dapat digunakan sesuai kebutuhan. Jika terjadi kesalahan pada permintaan, kita menangani kesalahan tersebut dalam blok catch().

Menggunakan fetch() untuk Mengirim Data

Selain mengambil data, kita juga dapat menggunakan fetch() untuk mengirim data ke server dengan metode HTTP POST. Berikut adalah contoh penggunaan fetch() untuk mengirim data dalam format JSON:

fetch('https://www.contohapi.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ nama: 'John Doe', umur: 25 }),
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log('Terjadi kesalahan:', error);
  });

Pada contoh di atas, kita menggunakan fetch() untuk membuat permintaan POST ke URL 'https://www.contohapi.com/data'. Selain itu, kita juga mengatur metode permintaan menjadi 'POST' dan mengatur tipe konten header menjadi 'application/json'. Data yang ingin dikirim kemudian di-serialize menggunakan JSON.stringify() dan disertakan dalam properti body permintaan.

Mengelola Respons dan Kesalahan

Sebagai respons dari permintaan yang dibuat menggunakan fetch(), kita dapat mengakses berbagai properti dan metode yang berguna. Berikut adalah beberapa di antaranya:

  • response.status: Mengembalikan status kode HTTP dari respons.
  • response.ok: Mengembalikan nilai true jika status kode respons berada dalam rentang 200-299 (sukses).
  • `

response.json()`: Mengembalikan Promise yang berisi data respons dalam format JSON.

  • response.text(): Mengembalikan Promise yang berisi data respons dalam format teks.
  • response.headers: Mengembalikan objek Headers yang berisi informasi tentang header respons.

Selain itu, jika terjadi kesalahan pada permintaan, kita dapat menangani kesalahan tersebut menggunakan metode .catch(). Pada blok catch(), kita dapat menampilkan pesan kesalahan atau melakukan tindakan yang sesuai.

Kelebihan fetch() dibandingkan Metode Lain

fetch() memiliki beberapa kelebihan dibandingkan metode lain untuk melakukan permintaan HTTP, seperti XMLHttpRequest. Beberapa kelebihan tersebut adalah:

  1. Asynchronous: fetch() menggunakan Promise yang memungkinkan kita untuk mengelola permintaan secara asynchronous tanpa menghentikan eksekusi kode JavaScript lainnya. Hal ini membantu meningkatkan responsivitas dan kinerja aplikasi web.
  2. Lebih Modern: fetch() adalah API baru pada JavaScript yang mendukung fitur-fitur terbaru seperti menggunakan Promise, menggunakan objek Request dan Response, serta memiliki dukungan bawaan untuk mengirim dan menerima data dalam format JSON.
  3. Lebih Sederhana: fetch() memiliki antarmuka yang lebih sederhana dan mudah digunakan dibandingkan dengan metode tradisional seperti XMLHttpRequest. Dalam contoh-contoh sebelumnya, kita dapat melihat bahwa penggunaan fetch() membutuhkan kode yang lebih ringkas dan mudah dibaca.

Kesimpulan

Fungsi fetch() pada JavaScript adalah alat yang sangat berguna untuk melakukan permintaan HTTP dalam pengembangan web. Dalam artikel ini, kita telah menjelajahi penggunaan fetch() untuk mengambil data dari server dan mengirim data ke server. Kita juga telah melihat bagaimana mengelola respons dan kesalahan dalam permintaan menggunakan fetch(). Dengan kemampuan asynchronous dan dukungan terhadap fitur-fitur terbaru, fetch() menjadi pilihan yang sangat baik untuk interaksi dengan sumber daya eksternal dalam pengembangan aplikasi web.

Jadi, jika Anda ingin menjalankan permintaan HTTP dengan mudah dalam JavaScript, fetch() adalah fungsi yang perlu Anda ketahui dan kuasai.