Cara menggunakan ASYCN di JavaScript

Dalam pengembangan sebuah website, asynchronous programming merupakan hal yang penting untuk dipelajari. Mengapa? . sebelum mempelajari asinkron, mari kita pahami dulu apa itu asinkron dan sinkron

👋🏼Sinkron vs Asinkron

Dalam program sinkron, ketika Anda menulis dua baris kode, kode akan dieksekusi secara berurutan dari baris pertama ke baris kedua, dengan kata lain kode kedua tidak dapat dieksekusi sebelum mengeksekusi kode pertama. Bisa dibayangkan dalam kehidupan nyata seperti mengantri di kasir untuk melakukan pembayaran. Anda tidak dapat melakukan pembayaran sebelum semua antrian di depan Anda dilayani

Tetapi dalam program asinkron, jika Anda menulis dua baris kode, Anda dapat mengeksekusi kode baris kedua tanpa harus menunggu baris pertama selesai dieksekusi. Di dunia nyata, bisa dibayangkan memesan makanan melalui seorang pramusaji, dimana sambil menunggu makanan datang, Anda bisa melakukan aktivitas lain seperti membuka laptop, menulis hingga pesanan Anda tersaji.

Urutan dia mendapatkan makanan terlebih dahulu memiliki korelasi dengan saat dia memesan makanan. Namun tidak hanya itu, faktor ini juga dipengaruhi oleh makanan apa yang dia pesan. Misalnya saat Anda memesan nasi rendang sedangkan teman Anda hanya memesan air mineral, padahal Anda yang memesan terlebih dahulu. Membuahkan nasi rendang tentunya akan memakan waktu lebih lama dibandingkan menuang air mineral ke dalam gelas

Dalam program yang dibuat menggunakan Asynchronous, tugas-tugas kecil akan diselesaikan terlebih dahulu dibandingkan dengan tugas-tugas besar, bahkan jika tugas besar dijalankan terlebih dahulu

Nah, apa perbedaan antara sinkron dan asinkron?

Jika sudah mari kita lanjut ke materi selanjutnya

setTimeout 🕦

Fungsi dari setTimeout() adalah cara termudah untuk membuat kode yang dapat berjalan secara asinkron. Fungsi ini menerima dua parameter. Parameter pertama adalah fungsi yang ingin dijalankan secara asinkron, kemudian parameter kedua adalah nilai angka dalam milidetik sebagai nilai tunggu sebelum 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 dapat disimpulkan bahwa hasilnya memiliki urutan sebagai berikut

1. Cetak > Halo
2. Tunggu selama dua detik
3. Percetakan > Terima kasih telah menghubungi layanan kami, silakan datang kembali
4. Mencetak > Adakah yang bisa membantu?

Namun, studi kasus ini sedikit berbeda karena kami menggunakan fungsi dari setTimeout() yang tidak akan menghentikan kode untuk menjalankan kode pada baris berikutnya, sehingga urutannya menjadi sebagai berikut.

1. Cetak > Halo
2. Mencetak >Ada bantuan?
3. Tunggu selama dua detik
4. Percetakan > Terima kasih telah menghubungi layanan kami, silakan datang kembali

Ketika program di atas dijalankan, maka akan muncul output sebagai berikut

Fungsi Panggilan Balik 🤙

Ada kebingungan ketika Anda bekerja dengan sinkron dan asinkron, bagaimana menangani nilai yang diperoleh secara asinkron dalam program yang berjalan secara sinkron. 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);

Kemudian outputnya

Jika Anda menggunakan cara ini untuk mencetak nilai kola dalam fungsi asinkron, maka itu tidak akan terjadi, mengapa demikian? . Jadi fungsi dari buyCola() akan selalu mengembalikan nilai 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 dieksekusi terlebih dahulu sebelum kode cola= 'Cola telah dipesan. ' . Kode asinkron harus diatur dengan cara yang berbeda dari kode normal atau kode sinkron. Cara paling sederhana adalah dengan menggunakan fungsi callback.

Apa itu fungsi panggilan balik? . Anda menunggu pesanan makanan datang ke meja, tetapi saat itu kami tidak bisa tinggal di meja karena ada urusan mendesak. Dalam hal ini mungkin ada dua hal yang bisa kita lakukan

• (Sinkron) Anda terus menunggu di meja sampai makanan yang dipesan tiba dan kemudian Anda meninggalkan restoran
• (Asynchronous) Anda meminta bantuan teman untuk menerima pesanan, dan bertemu nanti untuk memberikan makanan. Jadi Anda tidak perlu menunggu untuk meninggalkan restoran

Dalam JavaScript, teman kita bertindak seperti fungsi callback. Dia dapat dipesan pada fungsi asychronous dan akan dipanggil/digunakan saat tugas selesai

Lalu bagaimana cara membuatnya?

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 menggunakan parameter callback di fungsi setTimeout() yang diisi dengan data yang akan dibawa (cola) saat tugas selesai.

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

Setelah menggunakan  callback  , Function tidak perlu mengembalikan nilai atau  mengembalikan 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);

Kemudian kita gunakan fungsi buyCola , Kita ubah kodenya dari berikut ini.

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

Makhluk

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

Sehingga keseluruhan kode akan terlihat 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)
})

Kemudian outputnya

Panggilan Balik Neraka 😈

Seperti yang telah kita pelajari di atas, callback diperlukan untuk mendapatkan nilai yang berasal dari fungsi asinkron. Jadi bagaimana jika ada proses yang saling bergantung?

1. Siapkan bahan
2. Buat adonan
3. Siapkan adonan ke cetakan
4. Memanggang adonan

Pada level-level di atas sangat bergantung satu sama lain. Anda tidak bisa memanggang adonan sebelum Anda memiliki bahan-bahannya. Ketika tahapan dari semua tahapan berjalan secara sinkron kita dapat melakukannya sebagai berikut

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

Namun jika fungsi di atas berjalan secara asinkron, maka Anda akan membuat apa yang disebut callback hell. callback sih terjadi karena banyak sekali fungsi nested callback karena saling membutuhkan, hingga tampilan kodenya seperti 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 membutuhkan kehati-hatian ekstra, Bayangkan jika Anda mengembangkan kode ini di masa mendatang

Lalu bagaimana solusinya agar kita terhindar dari callback hell?

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);

Dengan Promise, Anda dapat meminimalkan callback hell dan mengubah kode agar lebih mudah dibaca

Apa itu JavaScript Tunggu async?

Untuk apa fungsi async?

Mengapa menggunakan async Menunggu?

Apa itu Node JS asinkron?