Contoh Ajax Memakai Fetch

Contoh Ajax Memakai Fetch
Seperti yang telah kita ketahui, fetch memanfaatkan promise dalam melakukan tugasnya, sehingga network request yang dibuat memakai fetch akan sering berjalan asynchronous.
Pemakaian dasar dari fetch terlihat semacam ini:
Contoh Ajax Memakai Fetch

Contoh Ajax Memakai Fetch

Network request dilakukan terhadap saat fungsi fetch() tereksekusi.
  1. fetch(“https://web-server-book-dicoding.appspot.com/daftar”)

Bila request berhasil diproses oleh server, fungsi fetch() akan mengembalikan promise resolve dan membawa response object di dalamnya. Tetapi nilai response yang dibawa resolve belum sebagai data JSON yang kita perlukan, tetapi informasi tentang response itu sendiri, seperti status codetarget urlheaders, dsb. Oleh sebab itu, agar mendapatkan data JSON yang diperlukan, kita harus merubah response object ke dalam wujud JSON dengan memanggil method .json().
    1. fetch(“https://web-server-book-dicoding.appspot.com/daftar”)
    1.  .then(response => {
    1.  return response.json();
    2.  })

Method .json() juga mengembalikan nilai Promise, sehingga kita memerlukan chaining promise dengan menambahkan .then() agar mendapatkan data JSON yang sebenarnya.
    1. fetch(“https://web-server-book-dicoding.appspot.com/daftar”)
    1.  .then(response => {
    1.    return response.json();
    1.  })
    1.  .then(responseJson => {
    1.    console.log(responseJson);
    2. })

Lalu jangan sampai lupa juga untuk menambahkan block catch() di akhir chaining promise untuk menangani jika rejected promise terjadi baik sebab fungsi fetch() atau json().
    1. fetch(“https://web-server-book-dicoding.appspot.com/daftar”)
    1.  .then(response => {
    1.    return response.json();
    1.  })
    1.  .then(responseJson => {
    1.    console.log(responseJson);
    1.  })
    1.  .catch(error => {
    1.    console.log(error);
    2. });

Sebab fetch memanfaatkan promise, kita dapat memanfaatkan async/await bila Kamu lebih suka dengan gaya penulisan synchronous.
  • Promise
    1. fetch(“https://web-server-book-dicoding.appspot.com/daftar”)
    1.  .then(response => {
    1.    return response.json();
    1.  })
    1.  .then(responseJson => {
    1.    console.log(responseJson);
    1.  })
    1.  .catch(error => {
    1.    console.log(error);
    2. });

    • async/await
    1. async function getBooks() {
    1.  try {
    1.    const response = await fetch(“https://web-server-book-dicoding.appspot.com/daftar”);
    1.    const responseJson = await response.json();
    1.    console.log(responseJson);
    1.  } catch (error) {
    1.    console.log(error);
    1.  }
    1. }
    2. getBooks();

Advanced Fetch Usage

Fungsi fetch() bisa menerima dua buah patokan di dalamnya. Selain menetapkan target URL, kita juga bisa memberikan options untuk menetapkan methodheaderbody, dsb pada request yang akan dijalankan. Tetapi penerapan options ini bersifat pilihan. Tidak wajib.
Contoh Ajax Memakai Fetch

Contoh Ajax Memakai Fetch

Pemakaian fetch() tanpa menerapkan options akan membuat GET request sederhana yang ditujukkan pada targetUrl. Hal itu sama seperti yang telah kita lakukan sebelumnya. Lantas kapan kita harus menerapkan options pada pemakaian fetch? Berikut sejumlah kasus ketika kita membutuhkannya.

Changing Request Method

Untuk membuat POST request maupun method request lainnya kita harus menerapkan options dengan properti method di dalamnya.
fetch(“https://web-server-book-dicoding.appspot.com/add”, {
 method: “POST”
})

Nilai dari properti method dituliskan dalam wujud string, misalnya “POST”“PUT”“DELETE”, dsb. Nilai default dari properti ini merupakan “GET”, sehingga bila kita membuat GET Request, kita tidak mesti menetapkan nilai method secara eksplisit.

Set Header Property

Untuk menambahkan request header dengan fetch kita pakai properti headers pada options. Misalnya, untuk menambahkan properti Content-Type dengan nilai application/json pada headers kita bisa melakukannya dengan semacam ini:
    1. fetch(“https://web-server-book-dicoding.appspot.com/add”, {
    1.  method: “POST”,
    1.  headers: {
    1.    “Content-Type”: “application/json”
    1.  }
    2. })

Tentu kita juga bisa menetapkan lebih dari satu properti pada headers. Misalnya kita tambahkan lagi properti X-Auth-Token dengan nilai 12345.
    1. fetch(“https://web-server-book-dicoding.appspot.com/add”, {
    1.  method: “POST”,
    1.  headers: {
    1.    “Content-Type”: “application/json”,
    1.    “X-Auth-Token”: “12345”
    1.  }
    2. })

Set Data to Body Request

Untuk mengirimkan data pada body request kita pakai properti body pada options, misalnya semacam ini:
    1. fetch(“https://web-server-book-dicoding.appspot.com/add”, {
    1.  method: “POST”,
    1.  headers: {
    1.    “Content-Type”: “application/json”,
    1.    “X-Auth-Token”: “12345”
    1.  },
    1.  body: JSON.stringify({
    1.    id: 10,
    1.    title: “Edensor”,
    1.    author: “Andrea Hirata”
    1.  })
    2. })

Sama seperti XHR, data yang dikirimkan melalui body request perlu diubah jadi JSON String terlebih dulu.
    1. body: JSON.stringify({
    1.    id: 10,
    1.    title: “Edensor”,
    1.    author: “Andrea Hirata”
    2. })
Kamu bisa coba lakukan POST Request memakai Fetch dengan menjalankan potongan kode itu.

Butuh jasa pembuatan website di Makassar? kontak kami. Jasa Pembuatan Aplikasi Android, Jasa SEO dan SEM, SMM, Internet Marketing Agency, Social Media Strategist Makassar, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik bisa kami lakukan

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat