Cara menggunakan synchronous dan asynchronous javascript

Halo, selamat datang kembali di Ruang Developer Blog. Pada postingan kali ini kita akan mengenal apa itu Synchronous dan Asynchronous pada Javascript.

Synchronous pada Javascript

Synchronous berarti sequence atau berurut. Pada konsep ini, setiap statement kode dieksekusi baris per baris. Artinya, sebuah statement harus menunggu statement sebelumnya selesai dieksekusi. Untuk lebih jelasnya, perhatikan contoh kode berikut.

document.write("Halo <br>") // baris ini akan dieksekusi pertama kali
document.write("Welcome to Ruang Developer <br>") // baris ini akan dieksekusi setelah baris di atasnya

Output:

Halo
Welcome to Ruang Developer

Pada contoh kode di atas, baris kode pertama akan dieksekusi setelah itu barulah baris berikutnya. Seperti yang bisa kita lihat, proses eksekusi baris dilakukan secara berurutan. Setiap baris kode harus menunggu baris kode sebelumnya selesai dieksekusi. Sehingga, yang tampil adalah tesk Halo, setelah itu Welcome to Ruang Developer.

Asynchronous pada Javascript

Asyncrhonous merupakan kebalikan dari proses syncrhonous. Jika synchronous akan memblok proses eksekusi karena menunggu baris sebelumnya selesai, pada konsep asynchronous, baris kode dapat dieksekusi segera meskipun baris kode sebelumnya belum selesai dieksekusi. Untuk lebih jelasnya, perhatikan contoh kode berikut ini.

document.write("Halo <br>")
setTimeout(()=>{
    document.write("Hello World")
}, 2000)
document.write("Welcome to Ruang Developer <br>")

Output:

Halo
Welcome to Ruang Developer
Hello World

Pada awalnya, seperti biasa, baris Halo akan dieksekusi. Saat dijalankan di browser, ada API web yang menangani fungsi setTimeout. Kemudian, program terus dijalankan seperti biasa hingga saat mencapai waktu 2 detik, baris Hello World akan dieksekusi. Tidak ada proses blok yang mengharuskan fungsi setTimeout selesai, sehingga baris terakhir langsung dijalankan. Seperti itulah yang terjadi pada proses asynchronous.

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.

1

2

3

4

5

6

7

8

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

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.

1

2

3

<script src="https://code.jquery.com/jquery-3.4.1.min.js"

       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:

1

2

3

4

5

6

7

8

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:

1

2

3

4

5

6

7

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:

1

2

3

4

5

6

7

8

9

10

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:

1

2

3

4

5

6

7

8

9

10

11

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!

Kelas terkait: 

Materi artikel ini dapat kamu gali lebih dalam di kelas Membangun Progressive Web Apps. Klik di sini untuk detailnya.

Apa itu synchronous dan asynchronous pada JavaScript?

Apakah asynchronous dalam JavaScript?

Apa perbedaan dari asynchronous dan synchronous?

Apakah Node JS asynchronous?