Fetch() API

Salah satu problem ketika membuat aplikasi dengan meminimalisir library adalah ketika melalukan pemanggilan AJAX. Kadang mau gak mau gue tambahin jQuery, cuma buat pakai fitur AJAXnya yang mudah digunakan. Tapi kadang pula ketika ingin meminimalisir ukuran, gue tulis sendiri fungsi XHRnya. Meskipun, XMLHttpRequest cukup sulit untuk diingat implementasinya.

fetch()

Fungsi ini sama seperti AJAX. Digunakan untuk mengambil resource/data dari URL yang diberikan. Fungsi ini dapat dipanggil dengan window.fetch() atau fetch() dengan argument pertama adalah URL dan argument kedua adalah objek yang merupakan pengaturan tambahan. Fungsi ini akan menghasilkan objek Promise.

window.fetch("[url]", {[pengaturan_tambahan]}).
then(function(response) {
    //response object
});

window.fetch("[url]", {[pengaturan_tambahan]}).

then(function(response) {

//response object

});

Pengaturan tambahan yang dapat dimasukkan antara lain :

method: "[method]", //post, get, delete, dll.
headers: "[headers]",
body: "[body]",
mode: "[mode]". //cors, no-cors, atau same-origin
credentials: "[credentials]", //omit, same-origin, atau include
cache: "[cache]", //default, no-store, reload, no-cache, force-cache, atau only-if-cached.

method: "[method]", //post, get, delete, dll.

headers: "[headers]",

body: "[body]",

mode: "[mode]". //cors, no-cors, atau same-origin

credentials: "[credentials]", //omit, same-origin, atau include

cache: "[cache]", //default, no-store, reload, no-cache, force-cache, atau only-if-cached.

response

argumen response di dalam fungsi setelah chain "then" yang pertama memuat Response Object. Objek ini tidak memuat mentah-mentah data yang didapatkan dari URL yang diberikan, namun kita dapat mengembalikan objek ini menjadi data yang berguna dan dapat dibaca serta diolah untuk ditampilkan. Misal, data yang diperoleh adalah JSON, maka kita perlu mengembalikan fungsi response.json() lalu membuat chain "then" kembali seperti contoh di bawah ini.

window.fetch("/api/user/admin", {
	method: "GET"
}).
then(function(response) {
	//response berisi Response Object
	return response.json();
}).
then(function(data) {
	//data beriri objek dari URL yang diberikan
	console.log(data);
});

window.fetch("/api/user/admin", {

method: "GET"

}).

then(function(response) {

//response berisi Response Object

return response.json();

}).

then(function(data) {

//data beriri objek dari URL yang diberikan

console.log(data);

});

Selain json, fungsi lain didalam argumen response adalah blob() untuk mengembalikan data seperti file/gambar, dan text() untuk mengolah data plain text.

Seperti Promise Object pada umumnya, kita juga dapat menambahkan chain "catch" untuk mengatur apabila ada kesalahan / error.

window.fetch("[url]", {}).
then(function(response) {
    //response object
}).
then(function(data) {
    //data from URL
}).
catch(function(err) {
    //error handle
});

window.fetch("[url]", {}).

then(function(response) {

//response object

}).

then(function(data) {

//data from URL

}).

catch(function(err) {

//error handle

});

Namun, sebelum menggunakan fungsi fetch() untuk projek sehari-hari, ada baiknya periksa kompabilitas di setiap browser yang dituju. Fungsi fetch() baru bisa digunakan pada chrome versi 42, Firefox versi 39, dan Opera versi 29.

Jadi, berhubung fungsi ini masih “baru kemarin” dirilis dan sepertinya baru sedikit sekali pengguna internet yang mengupgrade browsernya, gue sendiri masih mencoba cara lama. Buat yang pingin tau lebih dalam fungsi ini, bisa ke http://updates.html5rocks.com/2015/03/introduction-to-fetch

April 19, 2015

In Uncategorized