Promise in stile sincrono in JavaScript

Per risolvere il problema del promise hell è stata ideata una sintassi speciale per le promise, che permette di scrivere il codice asincrono in modo molto più semplice - in stile sincrono.

Iniziamo a studiarlo. Per cominciare prendiamo il codice dalla lezione precedente:

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

func();

Se la nostra funzione getSmth fosse stata sincrona, allora il codice della funzione func avremmo potuto riscriverlo nel modo seguente:

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

La funzione getSmth, tuttavia, è asincrona, quindi il codice sopra riportato non funzionerà. Ma, utilizzando lo stile sincrono delle promise, riusciremo a ottenere qualcosa di simile. Facciamolo.

Per prima cosa dobbiamo dichiarare la nostra funzione func come asincrona utilizzando il comando speciale async:

async function func() {
	
}

Dopo di che, all'interno della funzione func potremo utilizzare il comando speciale await. Questo comando, scritto prima di una promise, farà sì che JavaScript aspetti finché la promise non viene eseguita. Dopodiché il comando restituirà il risultato della promise e l'esecuzione del codice continuerà.

Nel nostro caso, dobbiamo scrivere await prima della chiamata a getSmth. Poiché il risultato della chiamata a questa funzione sarà una promise, l'ulteriore esecuzione del codice continuerà solo dopo l'esecuzione di questa promise. Ebbene, il risultato della promise può essere salvato in una variabile. Realizziamo quanto descritto:

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

func();

Chiamiamo getSmth più volte:

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

func();

E ora chiamiamo getSmth in un ciclo:

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

Riscrivi il seguente codice tramite la sintassi sincrona:

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

func();