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.

Pengaturan tambahan yang dapat dimasukkan antara lain :

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.

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.

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


Comments

Derp says:

Tes di console browser, gagal.
Update browser, baru bisa. Ternyata update chromenya baru rilis beberapa hari kmarin.

[…] kemarin gue nulis tentang Fetch() API. Metode untuk mengambil resource / data dari URL yang diberikan. Method tersebut masih belum banyak […]

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.