Skip to main content

Contoh Ajax Menggunakan Fetch

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

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

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


Jika request berhasil diproses oleh server, fungsi fetch() akan mengembalikan promise resolve dan membawa response object di dalamnya. Namun nilai response yang dibawa resolve belum sebagai data JSON yang kita butuhkan, melainkan informasi mengenai response itu sendiri, seperti status codetarget urlheaders, dsb. Maka dari itu, untuk mendapatkan data JSON yang dibutuhkan, kita 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 nilai Promise, sehingga kita membutuhkan chaining promise dengan menambahkan .then() untuk 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.  })


Lalu jangan lupa juga untuk menambahkan block catch() pada akhir chaining promise untuk 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 bisa 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() dapat menerima dua buah parameter di dalamnya. Selain menetapkan target URL, kita juga dapat memberikan options untuk menetapkan methodheaderbody, dsb pada request yang akan dijalankan. Namun penerapan options ini bersifat pilihan. Tidak wajib.
2020031320004200d4bfb205c4a5469bb6063092d38d30.png
Penggunaan fetch() tanpa menerapkan options akan membuat GET request sederhana yang ditujukkan pada targetUrl. Hal tersebut sama seperti yang sudah kita lakukan sebelumnya. Lantas kapan kita perlu menerapkan options pada penggunaan fetch? Berikut beberapa kasus saat kita memerlukannya.

Changing Request Method

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

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

  2.  method: "POST"

  3. })


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

Set Header Property

Untuk menambahkan request header dengan fetch kita gunakan properti headers pada options. Contohnya, untuk menambahkan properti Content-Type dengan nilai application/json pada headers kita dapat melakukannya dengan seperti 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 dapat menetapkan lebih dari satu properti pada headers. Contohnya kita tambahkan lagi properti X-Auth-Token dengan 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

Untuk mengirimkan data pada body request kita gunakan properti body pada options, contohnya seperti 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 seperti XHR, data yang dikirimkan melalui body request perlu 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 temukan pada tautan berikut :
Anda bisa coba lakukan POST Request menggunakan Fetch dengan menjalankan potongan kode tersebut.

Popular posts from this blog

Blogger: The Ins And Outs

Blogging adalah semua kemarahan saat ini. Ini adalah cara yang menyenangkan dan murah untuk membuat suara Anda terdengar di Internet. Melalui blogging, Anda dapat membuat pemikiran harian Anda (intim atau tidak) diketahui publik – dan dengan audiens yang lebih besar. Ini membuat layanan ini bagus untuk menyimpan buku harian (jika membuat buku harian publik adalah pilihan terbaik Anda), pemasaran (blogging adalah cara yang bagus untuk melakukan pemasaran – lebih dari itu nanti), dan berbagi informasi dan memperbarui. Mengapa Blog? Blogging adalah cara hidup. Ini mungkin salah satu kekuatan teknologi yang paling memungkinkan untuk menghantam Internet dalam beberapa tahun terakhir. Anehnya, itu telah memungkinkan keterlibatan yang lebih besar dari orang-orang dengan teknologi dan informasi. Hal yang hebat tentang blogging adalah mudah dipelajari dan mudah digunakan – terutama dengan layanan blogging seperti Blogger. Blog adalah, dalam pengertian teknis, perangkat lunak manajemen konten ya...

Blog Jalan Anda ke Bank

Blog Jalan Anda ke Bank Pernahkah Anda mendengar tentang Ledakan Pemasaran Blog? Blog adalah weblog, diperbarui mingguan atau harian. Ini adalah buku harian atau jurnal online. Blog memiliki menjadi lebih populer daripada situs web. Tidak perlu tahu HTML, tidak perlu mengatur file seperti pustakawan, tidak perlu mendesain halaman web! Kalian semua yang harus Anda lakukan adalah menulis apa pun yang muncul di pikiran Anda (saat Anda menulis buku harian atau jurnal ) dan blog di server blog gratis, seperti http://www.blogger.com/ atau http://www.wordpress.com/ ! Lihat! Anda telah membuat blog, yang anak cucu dapat menikmati. Anda telah bergabung dengan jajaran terpilih Dante, Shakespeare dan Goethe! Mesin pencari menyukai konten asli yang segar dan jika Anda dapat memberikan yang baik konten, blog Anda akan populer. Apa pun yang Anda tulis di blog atau situs Anda akan dibaca oleh mesin pencari. Menyediakan konten yang baik adalah tugas Anda. NS mesin pencari akan memastikan lalu lintas y...

Apa itu Web API?

Web APIs Pada pengenalan modul ini kita sudah paham bagaimana AJAX dapat menampilkan informasi yang dinamis pada aplikasi kita. Namun kita belum mengetahui dari mana sumber data tersebut berasal? Bagaimana cara mengaksesnya? Untuk menjawab itu semua, mari berkenalan dengan Web API. Web API (Application Programming Interface) merupakan interface yang disediakan oleh penyedia data agar data yang ia miliki dapat dimanfaatkan dengan mudah pada banyak aplikasi, baik itu aplikasi web, mobile, desktop ataupun lainnya. Penyedia data yang telah membangun Web API memiliki keuntungan karena proses pengembangan aplikasi menjadi lebih efisien. Mengapa? Karena cukup dengan satu Web API, data dapat dikonsumsi pada berbagai macam platform seperti yang sudah disebutkan di atas. Pada ilustrasi di atas, Web API bekerja menggunakan salah satu pola standar yaitu REST (Representational State Transfer). Pola inilah yang saat ini banyak digunakan karena simpel dan mudah dipelajari daripada pola yang lainnya. ...