Promise'ai sinchroniniu stiliumi JavaScript

Norint išspręsti promise hell problemą, buvo sugalvotas specialus promise'ų sintaksė, leidžiantis rašyti asinchroninį kodą daug paprasčiau - sinchroniniu stiliumi.

Pradėkime jį mokytis. Pirmiausia paimkime kodą iš ankstesnės pamokos:

function func() {
	getSmth(2).then(res => {
		console.log(res); // išves 4
	});
}

func();

Jei mūsų funkcija getSmth būtų sinchroninė, tai funkcijos func kodą galėtume perrašyti taip:

function func() {
	let res = getSmth(2);
	console.log(res); // išves 4
}

Funkcija getSmth, tačiau, yra asinchroninė, todėl aukščiau pateiktas kodas neveiks. Bet pasinaudoję promise'ų sinchroniniu stiliumi, galime gauti kažką panašaus. Padarykime tai.

Pirmiausia turime paskelbti mūsų funkciją func asinchronine naudojant specialų komandą async:

async function func() {
	
}

Po to mes galėsime funkcijos func viduje naudoti specialią komandą await. Ši komanda, parašyta prieš promise'ą, privers JavaScript laukti tol, kol promise'as bus įvykdytas. Po to komanda grąžins promise'o rezultatą, ir kodo vykdymas tęsis.

Mūsų atveju turime parašyti await prieš getSmth iškvietimą. Kadangi šios funkcijos iškvietimo rezultatas bus promise'as, tai tolesnis kodo vykdymas tęsis tik po šio promise'o įvykdymo. O promise'o rezultatą galima įrašyti į kintamąjį. Atlikime aprašytą:

async function func() {
	let res = await getSmth(2);
	console.log(res); // išves 4
}

func();

Iškvieskime getSmth kelis kartus:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // išves 13
}

func();

O dabar kvieskime getSmth cikle:

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();

Perrašykite šį kodą naudojant sinchroninę sintaksę:

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

func();