Промисы в синхронном стиле в JavaScript

Для решения проблемы promise hell был придуман специальный синтаксис промисов, позволяющий писать асинхронный код гораздо проще - в синхронном стиле.

Давайте приступим к его изучению. Для начала возьмем код из предыдущего урока:

function func() {
	getSmth(2).then(res => {
		console.log(res); // выведет 4
	});
}

func();

Если бы наша функция getSmth была синхронной, то код функции func мы могли бы переписать следующим образом:

function func() {
	let res = getSmth(2);
	console.log(res); // выведет 4
}

Функция getSmth, однако, асинхронная, поэтому приведенный выше код не сработает. Но, воспользовавшись синхронным стилем промисов, мы сможем получить нечто похожее. Сделаем это.

Для начала мы должны объявить нашу функцию func асинхронной с помощью специальной команды async:

async function func() {
	
}

После этого мы сможем внутри функции func использовать специальную команду await. Эта команда, написанная перед промисом, заставит JavaScript ждать до тех пор, пока промис не выполнится. После чего команда вернет результат промиса, и выполнение кода продолжится.

В нашем случае мы должны написать await перед вызовом getSmth. Так как результатом вызова этой функции будет промис, то дальнейшее выполнение кода продолжится только после выполнения этого промиса. Ну, а результат промиса можно записать в переменную. Сделаем описанное:

async function func() {
	let res = await getSmth(2);
	console.log(res); // выведет 4
}

func();

Давайте вызовем getSmth несколько раз:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // выведет 13
}

func();

А теперь будем вызывать getSmth в цикле:

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

Перепишите следующий код через синхронный синтаксис:

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

func();