Contoh Ajax Menggunakan Fetch - Mengenal Penggunaan Fetch Ajax Javascript

Contoh Ajax Menggunakan Fetch - Mengenal Penggunaan Fetch Ajax Javascript

Seperti yang sudah kita ketahui bersama, fetch memanfaatkan promise guna dalam melakukan tugasnya, sehingga network request yang dibuat menggunakan fetch akan selalu berjalan asynchronous.

Penggunaan dasar daripada fetch tampak seperti ini:
20200313194951a9ddbc715b419aa9f5c19cfd5cb5ffae.png
Berikut Network request dilakukan pada saat fungsi fetch() tereksekusi.

  1. fetch("https://web-server-book-dicoding.appspot.com/list")


ketika request berhasil diproses oleh server, fungsi fetch() akan mengembalikan promise resolve dan membawa response object di dalamnya. Akan tetapi nilai response yang dibawa resolve belum sebagai data JSON yang kita butuhkan, melainkan informasi mengenai response itu sendiri, seperti status codetarget urlheaders, lain dsb. Oleh karena  itu, untuk mendapatkan data JSON yang dibutuhkan, kita kiranya perlu mengubah response object ke dalam bentuk JSON dengan memanggil method .json().

  1. fetch("https://web-server-book-dicoding.appspot.com/list")

  2.  .then(response => {

  3.    return response.json();

  4.  })


Method .json() juga mengembalikan value Promise, sehingga kita membutuhkan chaining promise dengan menambahkan .then() guna mendapatkan data JSON yang sesungguhnya.

  1. fetch("https://web-server-book-dicoding.appspot.com/list")

  2.  .then(response => {

  3.    return response.json();

  4.  })

  5.  .then(responseJson => {

  6.    console.log(responseJson);

  7.  })


Lantas jangan lupa juga untuk menambahkan block catch() pada akhir chaining promise guna menangani apabila rejected promise terjadi baik karena fungsi fetch() atau json().

  1. fetch("https://web-server-book-dicoding.appspot.com/list")

  2.  .then(response => {

  3.    return response.json();

  4.  })

  5.  .then(responseJson => {

  6.    console.log(responseJson);

  7.  })

  8.  .catch(error => {

  9.    console.log(error);

  10.  });


Karena fetch memanfaatkan promise, kita juga dapat memanfaatkan async/await jika Anda lebih suka dengan gaya penulisan synchronous.

  1. fetch("https://web-server-book-dicoding.appspot.com/list")

  2.  .then(response => {

  3.    return response.json();

  4.  })

  5.  .then(responseJson => {

  6.    console.log(responseJson);

  7.  })

  8.  .catch(error => {

  9.    console.log(error);

  10.  });




  1. async function getBooks() {

  2.  try {

  3.    const response = await fetch("https://web-server-book-dicoding.appspot.com/list");

  4.    const responseJson = await response.json();

  5.    console.log(responseJson);

  6.  } catch (error) {

  7.    console.log(error);

  8.  }

  9. }

  10.  

  11. getBooks();


Advanced Fetch Usage

Fungsi fetch() bisa menerima dua buah parameter di dalamnya. Selain menetapkan target URL, kita juga bisa memberikan options untuk menetapkan methodheaderbody, dsb pada request yang akan dijalankan. tapi penerapan options ini bersifat pilihan Tidak wajib.
2020031320004200d4bfb205c4a5469bb6063092d38d30.png
Penggunaan fetch() tanpa melakukan penerapan options akan membuat GET request sederhana yang ditujukkan pada targetUrl. Hal itu sama seperti yang sudah kita lakukan sebelumnya. Lalu kapan kita perlu menerapkan options pada penggunaan fetch? Berikut ini beberapa kasus saat kita memerlukannya.

Changing Request Method

Untuk membuat POST request ataupun method request lainnya kita harus menerapkan options dengan properti method di dalamnya.

  1. fetch("https://web-server-book-dicoding.appspot.com/add", {

  2.  method: "POST"

  3. })


Value dari properti method dituliskan dalam bentuk string, contohnya seperti “POST”“PUT”“DELETE”, dsb. Value default dari properti ini adalah “GET”, sehingga jika kita membuat GET Request, kita tidak lagi perlu menetapkan nilai method secara eksplisit.

Set Header Property

Guna menambahkan request header dengan fetch kita harus gunakan properti headers pada options. Contohnya, Guna menambahkan properti Content-Type dengan nilai application/json pada headers kita bisa melakukannya dengan seperti berikut ini:

  1. fetch("https://web-server-book-dicoding.appspot.com/add", {

  2.  method: "POST",

  3.  headers: {

  4.    "Content-Type": "application/json"

  5.  }

  6. })


Tentu kita juga bisa menetapkan lebih dari satu properti pada headers. Contohnya kita tambahkan lagi properti X-Auth-Token dengan value atau nilai 12345.

  1. fetch("https://web-server-book-dicoding.appspot.com/add", {

  2.  method: "POST",

  3.  headers: {

  4.    "Content-Type": "application/json",

  5.    "X-Auth-Token": "12345"

  6.  }

  7. })


Set Data to Body Request

Guna mengirimkan data pada body request, kita perlu gunakan properti body pada options, contohnya seperti berikut ini:

  1. fetch("https://web-server-book-dicoding.appspot.com/add", {

  2.  method: "POST",

  3.  headers: {

  4.    "Content-Type": "application/json",

  5.    "X-Auth-Token": "12345"

  6.  },

  7.  body: JSON.stringify({

  8.    id: 10,

  9.    title: "Edensor",

  10.    author: "Andrea Hirata"

  11.  })

  12. })


Sama halnya seperti XHR, data yang dikirimkan melalui body request, perlu juga diubah menjadi JSON String terlebih dahulu.

  1. body: JSON.stringify({

  2.    id: 10,

  3.    title: "Edensor",

  4.    author: "Andrea Hirata"

  5. })


Contoh kode di atas dapat Anda akses atau temukan pada tautan link berikut ini:  https://repl.it/@dicodingacademy/163-06-AJAX-Fetch-Advanced?lite=true
Anda bisa coba melakukan POST Request menggunakan Fetch dengan menjalankan potongan kode tersebut Terimakasih.

Komentar