Promises in synchrone stijl in JavaScript

Om het probleem van promise hell op te lossen, werd een speciale syntax voor promises bedacht, waardoor asynchrone code veel eenvoudiger geschreven kan worden - in een synchrone stijl.

Laten we beginnen met het bestuderen ervan. Laten we eerst de code uit de vorige les nemen:

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

func();

Als onze functie getSmth synchroon was, dan konden we de code van functie func als volgt herschrijven:

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

De functie getSmth is echter asynchroon, dus de bovenstaande code zal niet werken. Maar door gebruik te maken van de synchrone stijl van promises, kunnen we iets vergelijkbaars bereiken. Laten we dit doen.

Om te beginnen moeten we onze functie func asynchroon verklaren met behulp van het speciale commando async:

async function func() {
	
}

Hierna kunnen we binnen de functie func het speciale commando await gebruiken. Dit commando, geschreven voor een promise, zorgt ervoor dat JavaScript wacht tot de promise is voltooid. Daarna retourneert het commando het resultaat van de promise, en wordt de uitvoering van de code hervat.

In ons geval moeten we await schrijven voor de aanroep van getSmth. Omdat het resultaat van het aanroepen van deze functie een promise is, zal de verdere uitvoering van de code alleen worden hervat na voltooiing van deze promise. En het resultaat van de promise kan in een variabele worden opgeslagen. Laten we het beschrevene uitvoeren:

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

func();

Laten we getSmth meerdere keren aanroepen:

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

func();

En laten we nu getSmth in een lus aanroepen:

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

Herschrijf de volgende code via de synchrone syntax:

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

func();