Promise-ok szinkron stílusban JavaScriptben

A promise hell problémájának megoldására kifejlesztettek egy speciális promise szintaxist, amely lehetővé teszi az aszinkron kód sokkal egyszerűbb írását - szinkron stílusban.

Kezdjük is el tanulmányozását. Először vegyük az előző leckéből a kódot:

function func() {
	getSmth(2).then(res => {
		console.log(res); // kiírja a 4-et
	});
}

func();

Ha a getSmth függvényünk szinkron lenne, akkor a func függvény kódját a következőképpen írhatnánk át:

function func() {
	let res = getSmth(2);
	console.log(res); // kiírja a 4-et
}

A getSmth függvény azonban aszinkron, ezért a fenti kód nem fog működni. De a promise-ok szinkron stílusának kihasználásával valami hasonlót érhetünk el. Tegyük ezt meg.

Először is deklarálnunk kell a func függvényünket aszinkronná a speciális async paranccsal:

async function func() {
	
}

Ezek után a func függvényen belül használhatjuk a speciális await parancsot. Ez a parancs, amit egy promise elé írunk, arra kényszeríti a JavaScriptet, hogy várjon, amíg a promise befejeződik. Ez után a parancs visszaadja a promise eredményét, és a kód végrehajtása folytatódik.

Esetünkben a await-et a getSmth hívása elé kell írnunk. Mivel ennek a függvénynek a hívása promise-ot ad vissza, a további kódvégrehajtás csak a promise teljesítése után folytatódik. Nos, a promise eredményét pedig el lehet menteni egy változóba. Valósítsuk meg a leírtakat:

async function func() {
	let res = await getSmth(2);
	console.log(res); // kiírja a 4-et
}

func();

Hívjuk meg a getSmth-et többször:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // kiírja a 13-at
}

func();

Most pedig hívjuk meg a getSmth-et ciklusban:

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

Írja át a következő kódot szinkron szintaxisra:

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

func();