Les promesses en style synchrone en JavaScript

Pour résoudre le problème de l'enfer des promesses (promise hell), une syntaxe spéciale pour les promesses a été inventée, permettant d'écrire le code asynchrone beaucoup plus facilement - dans un style synchrone.

Commençons par l'étudier. Pour commencer, prenons le code de la leçon précédente :

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

func();

Si notre fonction getSmth était synchrone, alors le code de la fonction func pourrait être réécrit comme suit :

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

La fonction getSmth, cependant, est asynchrone, donc le code ci-dessus ne fonctionnera pas. Mais, en utilisant le style synchrone des promesses, nous pouvons obtenir quelque chose de similaire. Faisons cela.

Pour commencer, nous devons déclarer notre fonction func comme asynchrone à l'aide de la commande spéciale async :

async function func() {
	
}

Après cela, nous pourrons à l'intérieur de la fonction func utiliser la commande spéciale await. Cette commande, écrite devant une promesse, forcera JavaScript à attendre jusqu'à ce que la promesse soit exécutée. Ensuite, la commande renverra le résultat de la promesse, et l'exécution du code continuera.

Dans notre cas, nous devons écrire await avant l'appel à getSmth. Puisque le résultat de l'appel de cette fonction sera une promesse, l'exécution ultérieure du code ne continuera qu'après l'exécution de cette promesse. Eh bien, le résultat de la promesse peut être enregistré dans une variable. Faisons ce qui a été décrit :

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

func();

Appelons getSmth plusieurs fois :

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

func();

Et maintenant, appelons getSmth dans une boucle :

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

Réécrivez le code suivant en utilisant la syntaxe synchrone :

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

func();