Promiser i synkron stil i JavaScript

För att lösa problemet med promise hell utvecklades en speciell syntax för promiser, som gör det möjligt att skriva asynkron kod mycket enklare - i synkron stil.

Låt oss börja studera den. Till att börja med tar vi koden från föregående lektion:

function func() {
	getSmth(2).then(res => {
		console.log(res); // skriver ut 4
	});
}

func();

Om vår funktion getSmth var synkron, skulle vi kunna skriva om koden för funktionen func på följande sätt:

function func() {
	let res = getSmth(2);
	console.log(res); // skriver ut 4
}

Funktionen getSmth är dock asynkron, så ovanstående kod kommer inte att fungera. Men genom att använda den synkrona stilen för promiser kan vi få något liknande. Låt oss göra det.

Först måste vi deklarera vår funktion func som asynkron med hjälp av ett speciellt kommando async:

async function func() {
	
}

Efter detta kommer vi att kunna använda ett speciellt kommando await inuti funktionen func. Detta kommando, skrivet före ett promise, kommer att tvinga JavaScript att vänta tills promiset är uppfyllt. Därefter returnerar kommandot resultatet av promiset, och kodens exekvering fortsätter.

I vårt fall måste vi skriva await före anropet till getSmth. Eftersom resultatet av att anropa denna funktion blir ett promise, kommer den fortsatta exekveringen av koden endast att fortsätta efter att detta promise är uppfyllt. Och resultatet av promiset kan skrivas till en variabel. Låt oss göra som beskrivet:

async function func() {
	let res = await getSmth(2);
	console.log(res); // skriver ut 4
}

func();

Låt oss anropa getSmth flera gånger:

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

func();

Och låt oss nu anropa getSmth i en loop:

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

Skriv om följande kod genom den synkrona syntaxen:

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

func();