Cara menggunakan ASYNCHROUNSLY pada JavaScript

Async/await adalah fitur yang hadir sejak ES2017. Fitur ini mempermudah kita dalam menangani proses asynchronous.Async/Await merupakan sebuah syntax khusus yang digunakan untuk menangani Promise agar penulisan code lebih efisien dan rapih.Async/Await terbagi menjadi Async dan Await, mari kita lihat contohnya.

const getAllUser = async ()=> {

const data = await getUser()

console.log(data)

}

Pada contoh diatas, pertama kita memiliki function dengan menambahkan async didepan function yang mana berfungsi untuk menjadikan function tersebut asynchronous, dan await berfungsi menunda eksekusi hingga proses asynchronous selesai, dari kode di atas berarti console.log(data) tidak akan di eksekusi sebelum proses getUser() selesai. await juga bisa digunakan berkali-kali di dalam function.

Penjelasan penggunaan Async Await

1. Async/Await adalah salah satu cara untuk mengatasai masalah asynchronous pada Javascript selain menggunakan callback dan promise.
2. Pada implementasi Async/Await, kita menggunakan kata kunci async sebelum fungsi. Await sendiri hanya bisa digunakan pada fungsi yang menggunakan async.
3. Untuk menggunakan Async/Await, kembalian dari suatu fungsi harus merupakan suatu Promise. Async/Await tidak dapat berdiri tanpa adanya Promise.
4. Tidak seperti Promise, dengan Async/Await maka suatu baris kode dapat tersusun rapi mirip dengan kode yang sifatnya synchronous.
5. Setiap baris yang menggunakan await, akan ditunggu sampai Asynchronous Promise tersebut di resolve.

Error Handling Async/Await

Untuk menghandle error  Async/Await kita dapat menggunakan try catch di dalam function yang kita buat, sehingga jika terjadi error kita dapat menangkap errornya dalam block catch, berikut contoh penggunaannya.

const getAllUser = async ()=> {

try {

const result = await getUser()

console.log(result)

} catch (error) {

console.log(error)

}

}

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Dalam pengembangan sebuah website, asynchronous programing adalah hal yang penting untuk di pelajari. Kenapa? Karena, kita sering dan telah terbiasa menggunakan kode yang synchronous. sebelum kalian belajar mengenai asynchronus mari kita pahami terlebih dahulu apa itu asynchronous dan synchronous.

👋🏼Synchronous vs Asynchronous

Dalam sebuah program synchronous, apabila kalian menulis dua baris kode maka kode akan di eksekusi secara berurutan dari baris pertama hingga kedua, dangan kata lain kode yang kedua tidak dapat di eksekusi sebelum mengeksekusi kode pertama. Kalian dapat bayangkan hal ini dalam kehidupan nyata seperti mengantri di kasir untuk melakukan pembayaran. Kalian tidak bisa melakukan pembayaran sebelum semua antrian di depan kalian selesai dilayani.

Namun dalam sebuah program asynchronous, jika kalian menuliskan dua baris kode, Kalian dapat mengeksekusi baris kode kedua tanpa harus menunggu baris pertama selesai di eksekusi. Dalam dunia nyata kalian dapat bayangkan memesan makanan namum melalui pelayan, dimana sambil kalian menunggu hidangan datang, kalian dapat melakukan aktifitas lain seperti membuka laptop, menulis hingga pesanan kalian selesai di hidangakan.

Urutan dalam mendapatkan hindangannya terlebih dahulu memiliki korelasi dengan kapan saat dia memesan makanan. namun bukan hanya itu, faktor ini juga dipengaruhi oleh dengan makanan apa yang iya pesan. Contohnya apabila kalian memesan Nasi rendang sedangkan teman kalian hanya pesan air mineral, walaupun kalian memesannya terlebih dahulu. Membuah sebuah nasi rendang tentu akan membutuhkan waktu yang lebih lama di bandingkan dengan menuang air mineral pada gelas.

Dalam program yang di buat menggunakan Asynchorous pun demikia, Tugas yang kecil akan lebih dahulu selesai di bandingkan dengan tugas yang besar, meskipun tugas yang besar tersebut duluan yang di jalankan.

Baiklah sudah tergambarkan apa perbedaan synchronous dan asynchrnous?

Jika sudah mari kita masuk ke materi selanjutnya.

setTimeout 🕦

Fungsi dari setTimeout() merupakan cara yang paling sederhana untuk membuat kode yang dapat berjalan secara asynchrous. Fungsi ini menerima dua buah parameter. Parameter pertama adalah fungsi yang ingin dijalankan secara asynchrnous, kemudian parameter kedua adalah nilai number dalam miliseccond Sebagai nilai tunggu sebelum sebuah fungsi dijalankan. berikut adalah contoh sederhana penggunaan setTimeout():

console.log('Hallo!');
 
setTimeout(() => {
  console.log('Terimakasih sudah menghubungi layanan kami, silakan datang kembali!')
}, 2000);
 
console.log('Ada yang bisa dibantu?');

Dari program tersebut kalian dapat menyimpulkan hasilnya memiliki urutan seperti berikut.

1. Mencetak > Hallo!
2. Menunggu selama dua detik
3. Mencetak > Terimakasih sudah menghubungi layanan kami, silakan datang kembali!
4. Mencetak > Ada yang bisa dibantu?

Namun pada studi kasus kali ini agak sedikit berbeda karena kita menggunkan fungsi dari setTimeout() yang tidak akan menghentikan kode untuk menjalankan kode pada baris berikutnya, jadi urutanya akan seperti berikut.

1. Mencetak > Hallo!
2. Mencetak >Ada yang bisa dibantu?
3. Menunggu selama dua detik
4. Mencetak > Terimakasih sudah menghubungi layanan kami, silakan datang kembali!

Apabila program diatas dijalankan maka akan menampilkan output seperti berikut:

Callback Function 🤙

Terdapat kebingungan apabila kalian bekerja dengan synchronous dan asynchronous, bagaimana menangani sebuah nilai yang didapatkan secara asynchronous pada program yang berjalan secara synchronous. Contohnya seperti kode berikut:

const buyCola = () => {
  let cola = null;
  console.log('Sedang memesan kola, silakan tunggu ....');
  
  setTimeout(() => {
    cola= 'Kola selesai dipesan!';
  }, 3000);
  
  return cola;
};
 
const cola = buyCola();
console.log(cola);

Maka outputnya :

Jika kalian menggunakan cara seperti ini untuk mencetak nilai kola yang berada di dalam fungsi asynchronous, maka hal tersebut tidak akan terjadi, Mengapa demikian? Karena seperti yang telah kalian pahami fungsi setTimeout() tidak dapat menghentikan kode JavaScript untuk mengeksekusi kode selanjutnya. Jadi fungsi dari buyCola() akan selalu mengembalikan/mereturn nilai  null , Itu karena kode  return cola  akan di eksekusi terlebih dahulu sebelum kode cola= 'Kola selesai dipesan!' . Kode asynchronous haruslah disusun dengan cara yang berbeda dari kode biasa atau kode synchronous. Cara yang paling sederhana adalah menggunakan callback function.

Apa itu callback function? Mari kalian bayangkan dalam kehidupan di dunia nyata. Kalian menunggu pesanan makanan datang ke meja akan tetapi, Pada saat itu juga kita tidak dapat berada terus di meja itu karena ada urusan mendadak. Pada kasus ini mungkin ada dua hal yang kita bisa lakukan:

• (Synchronous) Kalian tetap menunggu di meja hingga makanan yang dipesan datang dan kemudian kalian meninggalkan restoran tersebut.
• (Asynchronous) Kalian minta tolong ke teman untuk menerima pesanan tersebut, dan bertemu nanti untuk memberikan makanannya. Sehingga kalian tidak perlu menunggu untuk meninggalkan restoran .

Pada JavaScript, teman kita ini berperan seperti callback function . Dia dapat diperintahkan pada sebuah fungsi asychronous lalu akan di panggil/digunakan ketika tugas itu selesai.

Lalu bagaimana cara membuatnya? Yang kalian akan lakukan pertama kali adalah menambahkan parameter dengan nama callback pada fungsi asynchronous.

const buyCola = callback => {
  let cola = null;
  console.log('Sedang memesan kola, silakan tunggu ....');
  
  setTimeout(() => {
    cola= 'Kola selesai dipesan!';
  }, 3000);
  
  return cola;
};
 
const cola = buyCola();
console.log(cola);

Kemudian kita gunakan parameter callback di dalam fungsi setTimeout() yang diisi dengan data yang akan di bawa (cola) ketika tugas selesai dilakukan.

setTimeout(() => {
    cola= 'Kola selesai dipesan!';
  }, 3000);

Setelah menggunakan callback , Fungsi tidak perlu mengembalikan nilai atau return cola; . Sehingga keseluruhan kodenya akan tampak seperti berikut:

const buyCola = callback => {
  let cola = null;
  console.log('Sedang memesan kola, silakan tunggu ....');
  
  setTimeout(() => {
    cola= 'Kola selesai dipesan!';
		callback(cola)
  }, 3000);
  
};
 
const cola = buyCola();
console.log(cola);

Lalu kita untuk menggunakan fungsi  buyCola , Kita ubah kode dari berikut:

const cola = buyCola();
console.log(cola);

Menjadi:

const cola = buyCola(cola=>{
		console.log(cola);
})

Sehingga keseluruhan kode akan tampak seperti berikut:

const buyCola = callback => {
  let cola = null;
  console.log('Sedang memesan kola, silakan tunggu ....');
  
  setTimeout(() => {
    cola= 'Kola selesai dipesan!';
		callback(cola)
  }, 3000);
  
};
 
const cola = buyCola(cola=>{
		console.log(cola)
})

Maka outputnya:

Callback Hell 😈

Seperti yang telah kita pelajari diatas callback dibutuhkan untuk mendapatkan niali yang berasal dari asynchronous function. Lalu bagaimana jika terdapat proses yang saling bergantung satu sama lain? Contohnya, untuk membuat Donat tahapan yang perlu di lakukan adalah:

1. Mempersiapkan bahan
2. Membuat adonan
3. Menyiapkan adonan ke cetakan
4. Memanggang adonan

Pada tahapan diatas sangat tergantung satu sama lain. kalian tidak dapat memanggang adonan sebelum ada bahannya. Apabila tahapan seluruh tahapan tersebut berjalan dengan synchronous kita dapat melakukannya seperti berikut:

function buatDonat(...bahanMentah) {
  const bahan = campurBahan(bahanMentah),
	      adonan = buatAdonan(bahan),
	      tuanganAdonan = tuangAdonan(adonan),
	      donat = panggangDonat(tuangAdonan);
  
  console.log(donat);
}

Namun jika fungsi-fungsi diatas berjalan dengan asynchronous, makan kalian akan membuat yang namanya callback hell. callback hell terjadi karena banyak sekali callback function yang bersarang karena saling butuh satu dan lain, hingga kode akan tampak sperti berikut:

function buatDonat(...bahanMentah) {
  campurBahan(bahanMentah, function (bahan){
		buatAdonan(bahan, function(adonan){
		  tuangnAdonan(adonan, function(tuanganAdonan){
				panggangDonat(tuanganAdnan, function(donat){
					console.log(donat);
				});
			});	
		});
	});
	      
}

Melihat kode seperti ini sangat membingungkan dan memerlukan ketelitian yang ekstra, Terbayang jika mengembangkan kode ini di masa yang akan datang.

Lalu apa solusi agar kita dapat menghindari callback hell ? Salah satu solusinya adalah menggunakan Promise, Perhatikan potongan kode dibawah.

function buatDonat(...bahanMentah) {
campurBahan(bahanMentah)
		.then(buatAdonan)
		.then(tuangAdonan)
		.then(panggangDonat)
		.then(console.log);
  
}

Dengan adanya Promise, kalian dapat meminimalisir callback hell dan mengubah kodenya menjadi lebih mudah dibaca.

Untuk materi Promise secara lengkap akan di bahas pada artikel berikutnya.

Sekian dulu tutorial pada kesempatan kali ini semoga kalian paham, dan semoga bermanfaat 😁

Baca juga :

Traktir creator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas

Apa itu asynchronous JavaScript?

Apa perbedaan JavaScript synchronous and asynchronous?

Apa itu asynchronous pada pemrograman?

Kapan menggunakan async Await?