Promisy v synchronním stylu v JavaScriptu

Pro řešení problému promise hell byl vymyšlen speciální syntax pro promisy, umožňující psát asynchronní kód mnohem jednodušeji - v synchronním stylu.

Pojďme se jej naučit. Nejprve si vezmeme kód z předchozí lekce:

function func() {
	getSmth(2).then(res => {
		console.log(res); // vypíše 4
	});
}

func();

Kdyby naše funkce getSmth byla synchronní, pak bychom kód funkce func mohli přepsat následovně:

function func() {
	let res = getSmth(2);
	console.log(res); // vypíše 4
}

Funkce getSmth je však asynchronní, proto výše uvedený kód nebude fungovat. Ale pomocí synchronního stylu promisů můžeme dosáhnout něčeho podobného. Pojďme na to.

Nejprve musíme deklarovat naši funkci func jako asynchronní pomocí speciálního příkazu async:

async function func() {
	
}

Poté budeme uvnitř funkce func moci používat speciální příkaz await. Tento příkaz, napsaný před promisem, donutí JavaScript čekat, dokud promisa nedokončí svůj běh. Poté příkaz vrátí výsledek promisy a provádění kódu bude pokračovat.

V našem případě musíme napsat await před volání getSmth. Protože výsledkem volání této funkce bude promisa, další provádění kódu bude pokračovat pouze po dokončení této promisy. No, a výsledek promisy lze zapsat do proměnné. Proveďme popsané:

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

func();

Pojďme zavolat getSmth několikrát:

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

func();

A nyní budeme volat getSmth v cyklu:

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

Přepište následující kód pomocí synchronní syntaxe:

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

func();