fetch()
memungkinkan Anda membuat permintaan jaringan yang mirip dengan XMLHttpRequest (XHR). Perbedaan
utamanya adalah Fetch API menggunakan Promise, yang memiliki
API yang lebih sederhana untuk membantu Anda menghindari callback yang rumit di
XMLHttpRequest API.
Jika Anda belum pernah menggunakan Promise, lihat Pengantar Promise JavaScript.
Permintaan Pengambilan Dasar
Berikut adalah contoh yang diimplementasikan dengan XMLHttpRequest
,
lalu dengan fetch
. Kita ingin meminta URL, mendapatkan respons, dan menguraikannya sebagai JSON.
XMLHttpRequest
XMLHttpRequest
memerlukan dua pemroses untuk menangani kasus keberhasilan dan error, serta panggilan ke open()
dan send()
.
Contoh dari dokumen MDN.
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Ambil
Permintaan pengambilan kita terlihat seperti ini:
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
Permintaan fetch()
hanya memerlukan satu panggilan untuk melakukan pekerjaan yang sama seperti contoh
XHR. Untuk memproses respons, pertama-tama kita periksa apakah status responsnya adalah 200, lalu uraikan respons tersebut sebagai JSON. Respons terhadap permintaan fetch()
adalah objek Stream, yang berarti setelah kita memanggil metode json()
, Promise akan ditampilkan.
Streaming terjadi secara asinkron.
Metadata Respons
Contoh sebelumnya menunjukkan status objek Response, dan cara mengurai respons sebagai JSON. Berikut adalah cara menangani metadata lain yang mungkin ingin Anda akses, seperti header:
fetch('users.json').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
Jenis Respons
Saat kita membuat permintaan pengambilan, respons akan diberi response.type
"basic
",
"cors
" atau
"opaque
".
types
ini menunjukkan asal resource, dan Anda dapat menggunakannya untuk
menentukan cara memperlakukan objek respons.
Saat browser meminta resource pada asal yang sama, respons akan memiliki
jenis basic
dengan pembatasan terkait apa yang dapat Anda lihat dari respons.
Jika permintaan dibuat untuk resource di origin lain, dan origin tersebut menampilkan
header COR, jenisnya adalah cors
. Respons cors
mirip dengan respons basic
, tetapi membatasi header yang
dapat Anda lihat ke Cache-Control
, Content-Language
, Content-Type
, Expires
,
Last-Modified
, dan Pragma
.
Respons opaque
berasal dari asal yang berbeda yang tidak menampilkan header CORS. Dengan respons buram, kita tidak akan dapat membaca data yang ditampilkan atau melihat status permintaan, yang berarti Anda tidak dapat memeriksa apakah permintaan berhasil.
Anda dapat menentukan mode untuk permintaan pengambilan sehingga hanya jenis permintaan tertentu yang terselesaikan. Mode yang dapat Anda tetapkan adalah sebagai berikut:
same-origin
hanya berhasil untuk permintaan aset dari asal yang sama, dan menolak semua permintaan lainnya.cors
memungkinkan permintaan untuk aset pada origin yang sama dan origin lainnya yang menampilkan header COR yang sesuai.cors-with-forced-preflight
melakukan pemeriksaan preflight sebelum membuat permintaan apa pun.no-cors
dimaksudkan untuk membuat permintaan ke origin lain yang tidak memiliki header CORS dan menghasilkan responsopaque
, tetapi seperti yang dinyatakan , hal ini tidak dapat dilakukan dalam cakupan global jendela saat ini.
Untuk menentukan mode, tambahkan objek opsi sebagai parameter kedua dalam
permintaan fetch
dan tentukan mode dalam objek tersebut:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});
Perantaian promise
Salah satu fitur hebat dari promise adalah kemampuan untuk menyatukannya. Untuk
fetch()
, hal ini memungkinkan Anda berbagi logika di seluruh permintaan pengambilan.
Jika menggunakan JSON API, Anda perlu memeriksa status dan mengurai JSON untuk setiap respons. Anda dapat menyederhanakan kode dengan menentukan status dan penguraian JSON dalam fungsi terpisah yang menampilkan promise, dan menggunakan permintaan pengambilan untuk hanya menangani data akhir dan kasus error.
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
Contoh ini menentukan fungsi status
yang memeriksa response.status
dan
menampilkan Promise yang di-resolve sebagai
Promise.resolve()
,
atau Promise yang ditolak sebagai
Promise.reject()
.
Ini adalah metode pertama yang dipanggil dalam rantai fetch()
.
Jika Promise tersebut di-resolve, skrip akan memanggil metode json()
, yang menampilkan Promise kedua dari panggilan response.json()
dan membuat objek yang berisi JSON yang diurai. Jika penguraian gagal, Promise akan ditolak dan pernyataan catch akan dijalankan.
Struktur ini memungkinkan Anda berbagi logika ke semua permintaan pengambilan, sehingga kode lebih mudah dikelola, dibaca, dan diuji.
Permintaan POST
Terkadang aplikasi web perlu memanggil API dengan metode POST dan menyertakan beberapa
parameter dalam isi permintaan. Untuk melakukannya, tetapkan parameter method
dan body
dalam opsi fetch()
:
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
Mengirim kredensial dengan permintaan pengambilan
Untuk membuat permintaan pengambilan dengan kredensial seperti cookie, tetapkan nilai credentials
permintaan ke "include"
:
fetch(url, {
credentials: 'include'
})