Promises i synkron stil i JavaScript

Til løsning af problemet promise hell blev der udtænkt en særlig syntaks for promises, som giver mulighed for at skrive asynkron kode meget lettere - i synkron stil.

Lad os begynde at studere det. Til at starte med tager vi koden fra den forrige lektion:

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

func();

Hvis vores funktion getSmth var synkron, kunne koden for funktionen func omskrives på følgende måde:

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

Funktionen getSmth er imidlertid asynkron, så ovenstående kode vil ikke virke. Men ved at bruge den synkrone stil for promises, kan vi opnå noget lignende. Lad os gøre det.

Til at starte med skal vi erklære vores funktion func som asynkron ved hjælp af det særlige kommando async:

async function func() {
	
}

Efter dette vil vi inde i funktionen func kunne bruge den særlige kommando await. Denne kommando, skrevet foran et promise, vil få JavaScript til at vente indtil promise er opfyldt. Derefter vil kommandoen returnere resultatet af promise, og udførelsen af koden fortsætter.

I vores tilfælde skal vi skrive await før kaldet til getSmth. Da resultatet af kaldet til denne funktion vil være et promise, vil den videre udførelse af koden kun fortsætte efter opfyldelse af dette promise. Nå, og resultatet af promise kan gemmes i en variabel. Lad os gøre beskrevet:

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

func();

Lad os kalde getSmth flere gange:

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

func();

Og lad os kalde getSmth i en løkke:

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

Omskriv følgende kode via den synkrone syntaks:

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

func();