Mengenal Fungsi Asynchronous Request di Javascript

Mengenal Fungsi Asynchronous Request di Javascript-

Halo rekan-rekan developer,

Umumnya dalam dunia programing, kode yang kita tuliskan berjalan secara synchronous, begitu pula pada Javascript. Synchronous ini membuat kode yang kita tuliskan dijalankan secara berurutan. Hal ini sangat lemah ketika kita gunakan untuk melakukan sebuah pekerjaan yang berat, atau pekerjaan yang membutuhkan waktu yang belum dapat kita pastikan kapan pekerjaan itu selesai.

Jika kita melakukan pekerjaan tersebut secara synchronous, proses runtime akan terblokade hingga pekerjaan tersebut selesai dijalankan. Yang paling menakutkan adalah pengguna akan terganggu dengan adanya blocking tersebut.

bad user experience

Jika dari segi UX saja sudah buruk, lantas siapa yang mau akses website kita dengan cara tersebut? Untuk mengatasinya, kita harus melakukan pekerjaan tersebut secara asynchronous.

Kode yang dituliskan secara asynchronous akan dieksekusi di belakang thread utama atau biasa disebut main thread. Hal tersebut tidak akan membloking proses runtime atau menunggu hingga proses selesai dilakukan. Sembari menunggu proses tersebut selesai, compiler akan mengeksekusi perintah kode selanjutnya.

Pada Javascript, Asynchronous JavaScript and XMLHTTP atau biasa disebut AJAX merupakan salah satu konsep yang menerapkan metode asynchronous dalam menjalankan pekerjaannya. Biasa nya AJAX digunakan untuk melakukan permintaan data (request) dan menangani sebuah tanggapan (handling response), baik response dalam bentuk XML, Javascript ataupun JSON dari sebuah Rest API.

Asynchronous Request Javascript

Pada artikel kali ini, kita akan berkenalan dengan beberapa fungsi AJAX request. Yang pertama menggunakan XHR. Yang kedua, menggunakan JQuery. Dan yang ketiga menggunakan metode terbaru yang tentu paling disarankan saat ini yaitu dengan fungsi Fetch.

“Karena pada pembahasan ini kita akan mencoba menerapkan fungsi AJAX pada sebuah project, silakan clone contoh project berikut untuk bahan latihan.
https://github.com/riotfallen/football-apps-ajax
Semua kode yang akan kamu tuliskan akan dikerjakan pada fungsi getTeam di dalam berkas js/app.js.”

AJAX dengan menggunakan XHR

XMLHTTPRequest (atau disingkat XHR) merupakan salah satu teknik dalam membuat AJAX request. XHR yang tersedia secara native pada Javascript merupakan sesuatu keunggulan, tetapi untuk menggunakan XHR secara murni, banyak langkahnya. Apa pasal? Rupanya karena kita membuat sebuah fungsi AJAX secara manual. Penasaran? Mari kita coba.

Silakan buka repository yang sudah kalian clone, dan pastikan kamu berada pada branch master.

Sebagai langkah awal, buatlah sebuah objek dari XMLHTTPRequest.

1	const asyncRequestObject = new XMLHttpRequest();

Langkah selanjutnya, kita tentukan HTTP Method dan URL yang dituju dengan menggunakan fungsi open.

1	asyncRequestObject.open('GET', BASE_URL + teamName);

Kemudian tentukan fungsi handler pada event onload dan onerror.

asyncRequestObject.onload = function handleSuccess() {

const data = JSON.parse(this.responseText);

showTeam(data)

};

asyncRequestObject.onerror = function handleError() {

console.log('Ups, Failed to load data :(')

};

Nah, langkah akhir adalah mengirim sebuah request dengan menggunakan fungsi send.

1	xhr.send();

Sehingga kode pada fungsi getTeam akan menjadi seperti ini:

function getTeam(teamName) {

content.innerHTML = progressBar;

const asyncRequestObject = new XMLHttpRequest();

asyncRequestObject.open('GET', BASE_URL + teamName);

asyncRequestObject.onload = function handleSuccess() {

const data = JSON.parse(this.responseText);

showTeam(data)

};

asyncRequestObject.onerror = function handleError() {

console.log('Ups, Failed to load data :(')

};

asyncRequestObject.send()

}

Silakan jalankan projectnya pada browser dan cobalah cari tim sepakbola favorit kalian.

“Untuk menjalankan projectnya, Kalian dapat memanfaatkan Web Server for Chrome Extensions. Simak artikel berikut: Cara Membuat Browser Menjadi Lokal Web Server”

AJAX dengan menggunakan JQuery

Jika kamu merasa langkah sebelumnya kurang praktis, dengan bantuan library JQuery beberapa langkah tersebut sudah tak lagi diperlukan. Pada dasarnya, Fungsi AJAX menggunakan JQuery sama halnya dengan menggunakan XHR, tetapi kita tidak perlu membuat instance objek dari XMLHTTPRequest. Hanya saja untuk menggunakannya, tentu kita perlu menambahkan library JQuery pada project kita. Untuk latihan kali ini, cukup tambahkan tag script berikut di akhir tag <body> pada index.html.

integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

crossorigin="anonymous"></script>

Setelah menambahkan tag script tersebut, fungsi AJAX JQuery ready to go!

Mari kita ubah kode pada fungsi getTeam menggunakan AJAX JQuery seperti berikut:

function getTeam(teamName) {

content.innerHTML = progressBar;

$.ajax({

url: BASE_URL + teamName

}).done(showTeam).fail(function (err) {

console.log(err)

})

}

Lihat, berapa banyak langkah yang dihilangkan dari sebelumnya? Sekali lagi, kita tidak perlu membuat objek dari XMLHTTPRequest, dan untuk response handling nya pun dapat dilakukan secara langsung dengan memanggil fungsi done dan fail. Praktis bukan? Hasil yang sama pun akan ditampilkan jika kita coba jalankan projectnya pada browser.

AJAX dengan menggunakan Fetch API

Fungsi yang ketiga ini merupakan gabungan XHR dan JQuery. Apa sih maksudnya? Fetch API ini merupakan fungsi native yang tersedia pada Javascript dan tidak kalah praktis seperti JQuery saat menggunakannya. Fetch merupakan cara baru dalam melakukan network request. Pada dasarnya fungsi fetch memanfaatkan sebuah Promise, sehingga untuk menggunakan nya pastikan browser sudah mendukung ECMAScript 6 atau biasa disebut ES6. Good news! Karena kebanyakan browser sekarang sudah mendukung ES6 ini. Atau kamu dapat menggunakan teknik polyfill untuk browser yang belum mendukung ES6.

Untuk menggunakan fetch, cukup gunakan keyword fetch() kemudian tuliskan URL yang akan dituju di dalam tanda kurung tersebut.

1	fetch('<URL-to-the-resource-that-is-being-requested>');

Karena fetch mengembalikan sebuah Promise, maka untuk response handling nya kita gunakan fungsi then (jika Promise tersebut mengembalikan resolve) dan catch (jika Promise tersebut mengembalikan reject). Perhatikan kode berikut:

fetch('<URL-to-the-resource-that-is-being-requested>')

.then(function (response) {

return response.json()

})

.catch(function (err) {

console.log(`Ups, ${err} :(`)

})

Dari kode diatas dapat disimpulkan seperti ini. Jika request pada fetch berhasil dilakukan, maka blok then akan terpanggil dan mengembalikan nilai objek sesuai response yang didapat. Apabila fungsi fetch gagal dilakukan, maka blok catch akan terpanggil dan menampilkan eror pada console.

Kemudian untuk mengambil nilai objek yang dikembalikan pada blok then, kita dapat memanggil kembali fungsi then setelah pemanggilan fungsi catch. Perhatikan kode di bawah ini:

fetch('<URL-to-the-resource-that-is-being-requested>')

.then(function (response) {

return response.json()

})

.catch(function (err) {

console.log(`Ups, ${err} :(`)

})

.then(function (data) {

// variabel ${data} siap digunakan!

})

Parameter data pada fungsi yang terdapat pada akhir then merupakan nilai yang dikembalikan dari response.json() atau akan menjadi undefined apabila fungsi fetch gagal dilakukan (blok catch yang terpanggil).

“Jika kalian masih bingung bagaimana cara fungsi then bekerja dan mengapa hal tersebut diperlukan, wajib pelajari tentang Promise di sini”

Kemudian jika kita terapkan fetch pada fungsi getTeam, maka kode pada fungsi tersebut akan menjadi seperti ini:

function getTeam(teamName) {

content.innerHTML = progressBar;

fetch(BASE_URL + teamName)

.then(function (response) {

return response.json()

})

.catch(function (err) {

console.log(`Ups, ${err} :(`)

})

.then(showTeam)

}

Kesimpulan

Setelah coba menerapkan AJAX dengan metode berbeda-beda, apa metode terfavoritmu kini?

Tulis di kolom komentar berikut alasannya ya. Sebagai bahan komparasi, masing-masing metode sudah didokumentasikan melalui branch pada repository yang kamu clone sebelumnya.

Selamat mencoba!