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:

javascriptfunction 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:

javascriptfunction 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:

javascriptasync 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:

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

func();

Chiamiamo getSmth più volte:

javascriptasync 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:

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

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

func();