Proses asinkron sering digunakan untuk komunikasi data, karena data merupakan bagian inti dari sebuah aplikasi, sehingga konsep asinkron sangat penting untuk dipahami.
Selain menyertakan Bahasa yang Diartikan dan Bahasa yang Diketik Dinamis, JavaScript juga menyertakan Bahasa Pemrograman Berulir Tunggal
Artinya JavaScript hanya dapat melakukan satu operasi dalam satu waktu, sehingga kode JavaScript dijalankan secara berurutan dari atas ke bawah seperti antrian atau biasa disebut sinkron.
Copy
1console.log('Hi Brachio');
3console.log('the time has come');
5console.log('to learn how to code');
Namun hal ini bisa menjadi masalah jika ada kode yang eksekusinya memakan waktu lama, seperti kode untuk mendownload data dari server
Kami tidak tahu berapa lama untuk mengunduh data
Jika Anda mengikuti mekanisme sinkron di mana JavaScript hanya dapat melakukan satu operasi dalam satu waktu, maka JavaScript akan berhenti dan tidak akan mengeksekusi kode lebih lanjut sebelum pengunduhan selesai
Bahkan kita tetap bisa melakukan aktivitas browsing meskipun download sedang berlangsung dan browser tidak hang
Bagaimana JavaScript melakukannya?
Jawabannya adalah JavaScript melakukannya secara asinkron
Dalam konsep asinkron, kode akan dieksekusi tanpa menunggu eksekusi kode lain selesai sehingga seolah-olah dieksekusi secara bersamaan.
Kita bisa menggunakan simulasi berikut
Copy
1console.log('Hi Brachio');
4 console.log('the time has come');
7console.log('to learn how to code');
_setTimeout pada kode di atas membuat kata waktu telah tiba ditampilkan setelah 3 detik
Tetapi JavaScript tidak akan menunggu selama 3 detik tetapi akan segera menampilkan kata untuk mempelajari cara membuat kode
Sampai hasilnya
Berikut ini ikhtisar perbedaan antara sinkron, asinkron, dan asinkron dalam javascript
Sinkronis
Asinkron
Asinkron pada JavaScript
Untuk lebih memahami asinkron dalam JavaScript, kita perlu mengetahui apa itu Event Loop
Event loop adalah bagian dari JavaScript Runtime yang bertugas menangani Event Callback, Event Callback sendiri merupakan bagian dari kode yang dijalankan setelah event tertentu
Contoh Kasus. Klik tombol Unduh di browser
- klik mouse adalah sebuah acara
- Fungsi yang bertanggung jawab untuk mengunduh adalah panggilan balik
Saat terjadi event, callback dari event tersebut akan ditempatkan di tempat yang disebut Event Handler Queue atau Antrian
Event Loop akan terus memantau Queue dan akan mengeksekusi callback sesuai dengan urutan siapa yang masuk Queue terlebih dahulu
Ada 3 teknik yang digunakan untuk menangani proses asinkron dalam JavaScript
Callback adalah sebuah fungsi yang menjadi argumen bagi fungsi lain dan akan dieksekusi pada titik tertentu, bisa sekarang atau nanti
Contoh
Copy
2 console.log('Download complete!');
5const download = (url, callback) => {
6 console.log(`Downloading from ${url}....`);
11const url = '//brachio.site/download';
Keluaran dari kode di atas adalah
Copy
1Downloading from //brachio.site/download....
Pada kode di atas, fungsi notifikasi adalah fungsi panggilan balik, yang dipanggil setelah kode konsol. log(Mengunduh dari \${url}. );
💡 INFORMASI
Menjadikan suatu fungsi sebagai argumen untuk fungsi lain adalah sesuatu yang dimungkinkan dalam JavaScript, karena suatu fungsi dalam JavaScript adalah First-Class Object
Yang berarti fungsinya memiliki karakter yang sama dengan objeknya
Sampai suatu fungsi bisa
- disimpan dalam variabel, objek atau array
- menjadi argumen untuk fungsi lain (Fungsi Tingkat Tinggi)
- menghasilkan fungsi baru
Callback Bersarang
Kita dapat menambahkan callback di dalam callback
Copy
1const download = (url, callback) => {
2 console.log(`Downloading from ${url}....`);
7const url1 = '//brachio.site/download';
8const url2 = '//trex.site/download';
9const url3 = '//stego.site/download';
11download(url1, function () {
12 download(url2, function () {
13 download(url3, function () {
14 console.log('Download complete!');
Kode di atas dijalankan tanpa error dan menghasilkan output yang sesuai dengan perkiraan
Copy
1Downloading from //brachio.site/download....
2Downloading from //trex.site/download....
3Downloading from //stego.site/download....
Namun kondisi ini dapat menimbulkan masalah yang disebut dengan Callback Hell, yaitu kondisi dimana terdapat terlalu banyak callback di dalam callback lainnya.
Callback Hell membuat kode sulit dipahami dan sulit diperbaiki jika ditemukan bug di dalamnya
Sebagai gantinya kita bisa menggunakan Promise
Janji dapat dikatakan sebagai objek yang menyimpan hasil operasi asinkron, baik hasil yang diinginkan (resolved value) atau alasan mengapa operasi tersebut gagal (failure reason).
Kita ambil contoh seperti saat kita memesan taksi online
Saat kami mencari driver melalui aplikasi, aplikasi akan berjanji untuk memberi tahu kami tentang hasil pencarian kami
Hasilnya bisa antara dua yaitu driver ditemukan (resolved value) atau alasan mengapa driver tidak ditemukan (failure reason)
Janji ada di salah satu dari 3 kondisi (status)
- tertunda, operasi sedang berlangsung
- terpenuhi, operasi selesai dan berhasil
- ditolak, operasi selesai tetapi gagal
Sama seperti dalam kasus pemesanan taksi online, status permintaan kami di aplikasi online berada di antara tiga syarat
- Mencari driver (tertunda)
- Menemukan driver (terpenuhi)
- Driver tidak ditemukan (ditolak)
Membuat Janji
Kata kunci yang digunakan untuk membuat Janji adalah Janji
Copy
3const download = new Promise((resolve, reject) => {
5 resolve('Download complete');
7 reject('Download failed');
_Fungsi setelah kata kunci janji baru disebut pelaksana
Dan di pelaksana ada dua fungsi callback
- resolve(value) adalah fungsi callback yang dijalankan jika operasi yang dilakukan oleh eksekutor berhasil (terpenuhi)
- reject (error) adalah fungsi callback yang akan dijalankan jika operasi gagal (rejected)
Penanggung Janji
Selanjutnya untuk merespon hasil (baik berupa nilai maupun error) kita perlu menambahkan handler
Handler biasanya berupa fungsi dan ditempatkan dalam sebuah metode yang disebut then()
Copy
1download.then((result, error) => {
sedangkan untuk merespon error kita dapat menambahkan metode catch()
Rantai Janji
Karena output dari metode then() dan catch() adalah Promise, kita dapat mengaitkannya dengan Promises lainnya
Copy
3const download = new Promise((resolve, reject) => {
4 let progress = initProgress + 25;
10 console.log(`Download progress is ${result}%`);
14 console.log(`Download progress is ${result}%`);
19 console.log('Download complete');
Janji. semua()
Metode Janji. all() digunakan untuk mengeksekusi Janji secara paralel
Keluaran dari Janji. semua() adalah janji
Copy
1const downloadStart = new Promise((resolve, reject) => {
4const downloadHalf = new Promise((resolve, reject) => {
7const downloadFull = new Promise((resolve, reject) => {
11Promise.all([downloadStart, downloadHalf, downloadFull]).then((result) => {
_Panggilan Balik vs Janji
Seperti disebutkan sebelumnya bahwa kita dapat menggunakan janji untuk mengatasi masalah callback hell
❌ Panggilan Balik Neraka
Copy
1const download = (url, callback) => {
2 console.log(`Downloading from ${url}....`);
7const url1 = '//brachio.site/download';
8const url2 = '//trex.site/download';
9const url3 = '//stego.site/download';
11download(url1, function () {
12 download(url2, function () {
13 download(url3, function () {
14 console.log('Download complete!');
_✔️ Janji
Copy
1console.log('Hi Brachio');
4 console.log('the time has come');
7console.log('to learn how to code');
_1💡 Callback adalah fungsi dan Promise adalah objek
Async/Menunggu diperkenalkan di ES8 / ES2017 untuk menangani operasi asinkron dengan sintaks yang lebih mirip dengan sinkron
Async/Menunggu sendiri dibuat di atas Promise
Kami dapat mensimulasikan proses pengunduhan menggunakan kode di bawah ini
Copy
1console.log('Hi Brachio');
4 console.log('the time has come');
7console.log('to learn how to code');
_2Pada kode di atas, kata kunci await to make fungsi download harus menunggu sampai fungsi getStatus() dijalankan