asynchronous = keadaan dimana kita harus menunggu,

dan didalam nya terdapat callback/promise atau tunda/jeda

waktu, program dieksekusi.

synchornous = keadaan mengeksekusi tiap baris program

secara sekaligus, tanpa ada jeda waktu diantara baris

program.

CONTOH KASUS

====================================================================================

problem 1

saya punya sebuah button

<div className = "App">

<button onClick={login}>login</button>

saya ingin, ketika saya klik button tersebut

tampilkan tulisan Zepi Darmawan

contoh source code nya =

class App extends Component {

state = { text: 'text disini'}

callFirstName = () => {

setTimeout(() => {

return 'Zepi'}, 5000)

}

login = () => {

const first = this.callFirstName();

const last = 'Darmawan';

const name = first + last;

this.setState({text: name}) }

render = () => {

const {text} = this.state;

const {login} = this;

return (

<div className = "App">

<button onClick={login}>login</button>

<div />

<h2>{text}</h2>

</div>

);

jika dilihat, maka yang akan tampil

adalah = undefinedDarmawan

karena ada jeda waktu pada firstname

nah kita atasi bisa dengan callBack

kita buat parameter pada function callFirstName, bebas nama nya apa,

tapi saya pakai nama parameter nya callBack.

callFirstName = (callBack) => {

setTimeout(() => {

callBack('Zepi')}, 5000)

jadi kita mengirimkan argument ke parameter dengan sebuah function.

itu disebut dengan callBack.

dan

login = () => {

this.callFirstName((result) => {

const first = result();

const last = 'Darmawan';

const name = first + last;

this.setState({text: name}); });

};

-result adalah kita ambil hasil dari function callBack.

maka kita save, lalu jalankan,

maka hasil nya ZepiDarmawan ditampilkan dengan jeda 5 detik,

baru ditampilkan.

nah dengan callBack ini lah asynchronous dapat kita jalankan dengan

baik.

=====================================================================================

problem 2 CallBack

setelah dari pada itu kita dapat sebuah problem baru nih.

contoh dari kode diatas kita buat begini

callLastName = () => {

setTimeout(() => {

return "Darmawan";

}, 5000);

};

login = () => {

this.callFirstName((result) => {

const first = result();

const last = this.callLastName();

const name = first + last;

this.setState({text: name}); });

};
nah hasil nya =

ZepiUndefined

kenapa? karena proses yang kedua itu adalah asynchronous lagi,

kita tidak mungkin memanggil fungsi yang biasa saja,kita perlu mem

-manggil lagi, nah kita bisa callBack lagi.

callLastName = (cb) => {

setTimeout(() => {

cb("Darmawan");

}, 5000);

};

login = () => {

this.callFirstName((result) => {

const first = result();

this.callLastName((result2) => {

const lasy = result2;

const name = first + last;

this.setState({text: name});

})

});

};
maka hasilnya ketika dijalankan,

5 detik + 5 detik = 10 detik,

maka ketika login diklik ia akan menunggu selama 10 detik.

baru ditampilkan

ZepiDarmawan.

=====================================================================================

Promise

problem 3

nah problem selanjutnya , bisa anda bayangkan

jika kita melakukan callBack sebanyak lebih dari 10,

maka akan penuh tuh function login nya.

nah untuk menangani itu, muncul lah di ES6 itu sebuah

fungsi bernama promise

nah fungsi nya sama dengan callBack , fungsi nya untuk

menghandle asynchronous

class App extends Component {

state = { text: 'text disini'}

callFirstName = () => {

return new Promise((resolve) => {

setTimeout(() => {

resolve('Zepi')

}, 5000);

})

};

callLastName = (first) => {

return new Promise((resolve) => {

setTimeout(() => {

resolve(first + 'Darmawan')

}, 5000);

})

};

login = () => {

this.callFirstName()

.then(result => {

return this.callLastName(result)

})

.then(result2 => {

return this.setState({

text: result2

})

})

};
render = () => {

const {text} = this.state;

const {login} = this;

return (

<div className = "App">

<button onClick={login}>login</button>

<div />

<h2>{text}</h2>

</div>

);

hasilnya selama 10 detik ZepiDarmawan

dan result 2 diatas didalam nya sudah hasil gabungan first+'darmawan'

====================================================================

problem 4

kendala nya adalah kita perlu,mengirimkan result yang pertama

kepromise yang kedua ini, sedangkan kita inginnya dipromise yang

kedua ini, kita gak perlu mengirimkan ke result yang pertama

ke promise yang kedua ini, kita mau nya , result pertama kitagunakan
nya di then yang kedua.

nah gimana cara nya ?

nah ada cara yang berikt nya, dimana kita gak perlu mengirimkan

value yang pertama pada promise yang kedua ini.

callLastName = (first) => {

return new Promise((resolve) => {

setTimeout(() => {

resolve('Darmawan')

}, 5000);

})

};

login = () => {

Promise.all([this.callFirstName(). this.callLastName()])

.then([result, result2]) => {

this.setState({text: result + result2});

};

nah kita jalankan , kita tunggu 10 detikm maka hasilnya

ZepiDarmawan.
promise yang banyak tadi pakai then, diproblem ke 3, itu disebut

chaining

===================================================================

async / await

sebenarnya konsep pemanggilan asynchronous function biar bisa di

gunakan itu hanya 2 metode tadi.

callBack dan Promise

nah cara pemanggilan promise ini, ada cara lain, yang mana

kita bisa memanggilnya menggunakan asynchronous dan await.

cara tersebut biasanya ditandai dengan tanda async () didepan pada

sebuah fungsi,dengan ada nya kata async didepan fungsi

menunjukan semua fungsi yang ada didalam nya, bisa menggunakan

await = tunggu

callLastName = (first) => {

return new Promise((resolve) => {

setTimeout(() => {

resolve('Darmawan')

}, 5000);

})

};

login = async () => {

const first = await this.callFisrtName();

const last = await this.callLastName();

const name = first + last;

this.setState({

text : name

});

};

await digunakan pada element asynchronous.

artinya, tunggu saya selesai.

maka hasilnya =

ZepiDarmawan

nah cara async await ini lebih masuk akal untuk dibaca dari pada

caara promise all ataupun cara chaining tadi.

namun proses untuk menghandle asynchronous itu sendiri hanya bisa

dihandle oleh 2 hal tadi, promise/newpromise dan

function callback.

ketika meggunakan promise dia bisa dihandle / dipanggil

melalui 3 cara

pertama chaining bisa juga dengan promise all, dan

terakhir bisa menggunakan async await.

kesimpulan =

js itu bersifat synchronous pemanggilan semua fungsi" nya,

atau pembacaan sebuauh kode nya. ketika js hanya bisa menghandle

synchronous, dan menemukan kasus ada fungsi asynchronous, maka

itu tidak bisa dipanggil hanya dengan fungsi biasa, kita

perlu memanggilnya dengan fungsi yang bisa menghandle asynchronous,

dimana di js itu yang bisa memanggilnya yaitu callBack,Promise.

kalau callback itu sendiri, pemanggilan nya akan sangat dalam

karena callback itu adalah sebuah pemanggilan asynchronous pada

tahapan awal js, diversi terbaru kita bisa memanggil asynchronous

menggunakan promise, nah promise inilah yang bisa menghandle

asynchronous pada es terbaru.

setelah promise itu telah disiapkan, kita bisa mengkonsumsi/

menggunakan promise itu dengan 3 cara =

1.chaining then

2.promise all

3.async/await

nah demikian lah penggunaan nya.