Promised sünkroonses stiilis JavaScriptis

Promise hell'i probleemi lahendamiseks leiutati spetsiaalne promise'i süntaks, mis võimaldab kirjutada asünkroonset koodi palju lihtsamalt - sünkroonses stiilis.

Hakkame seda uurima. Alustuseks võtame eelmise õppetunni koodi:

function func() {
	getSmth(2).then(res => {
		console.log(res); // väljastab 4
	});
}

func();

Kui meie funktsioon getSmth oleks sünkroonne, siis funktsiooni func koodi saaksime ümber kirjutada järgmiselt:

function func() {
	let res = getSmth(2);
	console.log(res); // väljastab 4
}

Funktsioon getSmth on aga asünkroonne, seega ülaltoodud kood ei tööta. Kuid kasutades promise'i sünkroonset stiili, saame saavutada midagi sarnast. Teeme seda.

Alustuseks peame deklareerima oma funktsiooni func asünkroonseks kasutades spetsiaalset käsku async:

async function func() {
	
}

Pärast seda saame funktsiooni func sees kasutada spetsiaalset käsku await. See käsk, kirjutatud promise'i ette, sunnib JavaScripti ootama kuni promise täidetakse. Pärast seda tagastab käsk promise'i tulemuse ja koodi täitmine jätkub.

Meie puhul peame kirjutama await enne getSmth kutset. Kuna selle funktsiooni käivitamise tulemuseks on promise, siis koodi edasine täitmine jätkub alles pärast selle promise'i täitmist. Noh, promise'i tulemuse saab salvestada muutujasse. Teeme kirjeldatu:

async function func() {
	let res = await getSmth(2);
	console.log(res); // väljastab 4
}

func();

Kutsume getSmth mitu korda:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // väljastab 13
}

func();

Nüüd kutsume getSmth tsüklis:

async function func() {
	let arr = [1, 2, 3, 4, 5];
	let sum = 0;
	
	for (let elem of arr) {
		sum += await getSmth(elem);
	}
	
	console.log(sum);
}

func();

Kirjutage järgmine kood ümber sünkroonse süntaksi kaudu:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();