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:

Network request dilakukan terhadap saat fungsi fetch() tereksekusi.

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 code, target url, headers, 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 method, header, body, dsb pada request yang akan dijalankan. Tetapi penerapan options ini bersifat pilihan. Tidak wajib.

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: