Perbedaan Javascript Synchronous Dengan Asynchronous

Di kali ini saya akan membahas mengenai bahan javascript lebih detailnya kita akan membahs Perbedaan Javascript Synchronous Dengan Asynchronous. 

Sesungguhnya ketika kita membangun program dengan menggunakan javascript secara default akan di eksekusi secara berurutan dari atas ke bawah  menunggu satu baris selesai dahulu baru baris berikutnya akan di eksekusi.  Nah proses eksekusi yang seperti ini lazim di sebut dengan proses Synchronous atau orang-orang kadang menyebutnya dengan istilah Blocking.

 Kalau kita lihat di simulasi berikut :

 

 

 

 

 

Coba teman-teman lihat gambar di atas , di sebelah kiri adalah sebuah proses dari Synchronous sekiranya di terjemahkah di proses Synchronous setiap proses di panggil karenanya akan menunggu dahulu proses tersebut baru proses berikutnya dapat di eksekusi.

Sedangkan proses Asynchronous adalah sebuah kebalikan dari proses Synchronous dimana proses Asynchronous akan menjalankan prosese tanpa menunggu proses yang sebelumnya di panggil selsesai di proses.

kita akan melihat penggunaanya pada code kapan kita menggunakan Asynchronous :

 function getProducts(keyword) {
            // Code AJAX Here!
            const ajax = new XMLHttpRequest;
            const url = getProductsUrl(keyword);
            ajax.open('GET', url);
            ajax.send();
            const response = JSON.parse(ajax.responseText);
            console.log(response);
            
        }

Di kode di atas secara default akan di eksekusi atau di jalankan dengan menggunakan cara Synchronous tetapi sekiranya proses itu di jalankan pasti akan terjadi error karena proses menarik data di baris kode ini :

ajax.send();

membutuhkan waktu di luar eksekusi baris program,  jadi di dikala di tangkap datanya menggunakan json.parse akan terjadi error dimana datanya belum selesai di GET.

Nah bagi menjalankanya synchronous saja tidaklah cuku karenanya kita pun membutuhkan proses Asynchronous  dimana proses tersebut akan berjalan terpisah dari proses Synchronous , berikut kode nya :

function getProducts(keyword) {
            // Code AJAX Here!
            const ajax = new XMLHttpRequest;
            const url = getProductsUrl(keyword);
            ajax.open('GET', url);
            ajax.send();
            ajax.onload = function() {
                const data = JSON.parse(ajax.responseText);
                console.log(response);
                
            }
        }

di proses kode menggunakan Asynchronous  kita menggunakan sebuah CALLBACK atau lazim di sebut Anonymous Function bagi memisahkan proses Asynchronous  dengan Synchronous sehingga proses tersebut dapat di lakukan tanpa tabrakan satu dengan yang lainya.

Sumber https://kursuswebsite.org