Contoh Ajax Memakai Fetch

DAFTAR ISI
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
Baca Juga:  Contoh Pemakaian Default Parameters Di Javascript
    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. })
Baca Juga:  Apa itu Extreme Programming ??

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.

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Programmer Indonesia
Programmer Indonesia
Admin yang mengelola konten khusus berita. Kalau ada yang ingin diinfokan langsung chat aja ya :D
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
WhatsApp chat