Javascript Asynchronous
Bahasa pemrograman yang non blocking, tanpa harus menunggu proses pekerjaan yang lainnya
Call Stack
bagaimana javascript memanfaatkan memori dari menjalankan program atau intepreter dari kode yang telah ditulis. Atau untuk melacak lokasi skrip yang memanggil banyak fungsi satu atau yang lain atau fungsi yang dijalankan. Dan hal itu berpengaruh oleh pengaruh memori. Apakah memorinya lebih cepat atau lebih lambat
Contoh Call Stack Dengan Rumus Pythagoras
const perkalian = (x,y) => x * y;
const akar = x => perkalian (x,x);
const pythagoras = (a,b,c) => {
return akar(a) + akar(b) === akar (c);
};
pythagoras (3,4,5)
anda bisa masukkan di https://pythontutor.com/ untuk dapat melihat stepnya. Ada 20 step yang bisa dijalankan untuk menyelesaikan suatu rumus, Jika bisa lebih ringkas dengan step yang tidak banyak maka memori yang digunakanpun tidak banyak.
++++ Faktanya Javascript Itu Single Thread +++
Javascript dapat dibaca dengan sinkronous yang mana kumpulan proses yang dibuat dalam suatu program, jikalau sifatnya single thread maka satu persatu proses akan berjalan satu persatu, jika ada banyak maka harus menunggu satu dengan yang lainnya.
Single thread bisa dianalogikan aktifitas sehari-hari, sebelum menjalnkan aktifitas, harus ada proses secara urutan yaitu mandi dulu, makan, menyiapkan kopi sebelum berangkat kerja.
Bisa digabungan multi thread dengan single thread dalam satu halaman. Umpanyanya data akan dikirimkan ke server dan ditampilkan disisi client, kalau sifatnya single thread maka jika ada fungsi ketiga belum dibereskan atau diselesaikan sebelum fungsi kedua dibereskan. Namun bisa juga tanpa harus menunggu proses selesai dan disimpan di memori dengan menggunakan multihread
contoh dalam pemrograman
const newTask = input.value;
sendToServerAndSaveIt (newTask);
input.value ='';
console.log (' Bakal Muncul pertama');
setTimeout (() => {
console.log ('ini udah masuk memori proses tapi dijalankan setelah 3 detik');
},3000);
console.log ('Bakal Muncul Kedua');
Salah satu bahasa yang menggunakan multithread ini adalah bahasa program C++ yang dibuat untuk membuat browser
Sedangkan cara kerja browser adalah dengan api yang bisa menjalankan tugasnya dibalik layar seperti SetTimeout, sedangkan javascript call stack ini memahami fungsi Api yang dapat memanfaatkan pekerjaan dari Broser dan saat broser selesai menjalankan tugas, hasilnya akan dimasukkan kedalam stack sebagai callback
+++ Callback Hell Di Javascript Bikin Serem Dibacanya ++++
setTimeout (() => {
console.log ('ini udah masuk memori proses tapi dijalankan setelah 3 detik');
setTimeout (() => {
console.log ('ini udah masuk memori proses tapi dijalankan setelah 3 detik');
},3000);
setTimeout (() => {
console.log ('ini udah masuk memori proses tapi dijalankan setelah 3 detik');
},3000);
setTimeout (() => {
console.log ('ini udah masuk memori proses tapi dijalankan setelah 3 detik');
},3000);
},3000);
Nah, yang disebut dengan call back hell ini maka akan susah membacanya ketika banyaknya fungsi callback di dalam fungsi hingga puluhan dan anda bisa menggunakan salah satu objek yang dinamakan dengan promise
+++ Promise +++
merupakan respon objek apakah proses fungsi sebelumnya berhasil atau tidak (eror) maka akan bisa digunakan proses lainnya dengan menggunakan object promise
//callback version
cons requestCallback = ( url, success, failure) => {
const delay = Math.floor(Math.random() * 4500) + 500;
setTimeout (() => {
if (delay > 4000){
failure ('eror: sesssion Timeout');
} else {
success ('succces: ${url} (${delay} ms)');
}
}, delay);
};
Memanggil call back hell
const requesPromise = (url) => {
return new Promise (resolve,project)
};
requestCallback ('movie.com', function(response){
console.log (' Succes', response)},
function(error){
console.log ('error', error)};
requestCallback ('movie.com', function(response){
console.log (' Succes', response)},
function(error){
console.log ('error', error)};
requestCallback ('movie.com', function(response){
console.log (' Succes', response)},
function(error){
console.log ('error', error)};
);
//promise version
const requestPromise = (url) => {
return new Promise((resolve, reject) => {
const delay = Math.floor (Math.random () * 4500) +500;
setTimeout ( () => {
if ( delay > 4000){
reject('Eror : connection Timout');
} else {
resolve ('succes: ${url} (${delay} ms')
}
}, delay);
});
};
requestPromise('movie.com')
.then ((response)=>{
console.log ('success', response);
}).catch ((eror)) =>{
console.log (' eror', eror);
});
Nah, ini masih callback lagi! bagaimana caranya agar promisenya nggak callback lagi alias magicnya dan lebih simple tidak seprti callback lagi dan callback lagi
++++ cara benar menggunakan fungsi promise +++
requestPromise ('movie.com')
.then((result) => {
console.log ('page1');
console.log (result);
return requestPromise('movie.com');
})
.then((result) => {
console.log ('page2');
return requestPromise('movie.com');
})
.then((result) => {
console.log ('page3');
return requestPromise('movie.com');
})
.catch ((eror)) =>{
console.log (' eror', eror);
});
++++++ Cara Membuat Promise +++++
return new Promise ((resolve, reject) =>{
resolve (() => {
'berhasil'
});
resolve (() => {
'gagal'
});
});
const delayedColorChange = ( color, delay) => {
return new Promise ((resolve, reject) => {
setTimeout (()=>{
document.body.style.backgroundColor = color;
resolve();
}, delay);
});
};
delayedColorChange ('red', 1000)
.then (() => delayedColorChange ('yellow',1000))
.then (() => delayedColorChange ('green',1000))
.then (() => delayedColorChange ('blue',1000))
.then (() => delayedColorChange ('red',1000))
++++ Fungsi Async Keyword ++++
Asynchronous Function memiliki dua bagian yaitu async dan await
Asyn memiliki fungsi yang otomatis menjadi promise kalo fungsinya punya data, maka resolvenya akan mengirimkan juga yang bisa diolah, kalau di dalam funsgi tersebut memiliki object throw eror maka akan menjalankan bagian reject
Async function hello () {} // sudah tidak lagi menjadi function melainkan akan menjadi promise.
const hello = async () => {
return 'hello world';
};
hello().then((res) => {
console.log ('response',res);
});
ada misalan lainnya sebagai berikut
const hello = async () => {
throw = 'Maaf Gak kenal';
};
hello().then((res) => {
console.log ('response',res);
})
.catch ((err)=>{
console.log ('response',res);
});
++++ Fungsi async untuk Keyword await +++
Keyword Awit hanya bisa bekerja dengan diawali dalam function dengan async await akan melakukan jeda proses selanjutnya di dalam function, menunggu promise yang dijalankan resolved
async function ChangeColor () {
await delayedColorChange ('red', 1000);
await delayedColorChange ('YELLOW', 1000);
await delayedColorChange ('black', 1000);
await delayedColorChange ('blue', 1000);
await delayedColorChange ('red', 1000);
await delayedColorChange ('purpple', 1000);
return 'All Done';
}
ChangeColor().then ((ress) => alert(res));
++++ Mengelola Kondisi Eror Dengan Async await +++
const requestPromise = (url) => {
return new Promise((resolve, reject) => {
const delay = Math.floor (Math.random () * 4500) +500;
setTimeout ( () => {
if ( delay > 4000){
reject('Eror : connection Timout');
} else {
resolve ('succes: ${url} (${delay} ms')
}
}, delay);
});
};
async function requestHandler(){
try {
let result = await requesPromise ('movie.com');
console.log (result);
} catch (error) {
console.log (error);
}
}
Tinggalkan Balasan