Async await, la sinstassi per le funzioni asincrone

Una delle novità introdotte con ES2017 (ES8) è una sintassi speciale per lavorare con le Promise in modo più comodo e leggibile grazie a due paroline magiche: async e await.

Queste parole chiave permettono di scrivere codice asincrono mantenendo una struttura familiare e lineare. Non introducono un nuovo modo di gestire l’asincronia, ma rappresentano una semplificazione della sintassi basata sulle Promise.

La parola async consente di dichiarare una funzione asincrona che restituirà sempre una Promise, mentre await sospende l’esecuzione della sola funzione asincrona finché la Promise non viene risolta o rifiutata, senza bloccare il thread principale di JavaScript.

I blocchi try e catch ci aiutano a gestire rispettivamente il successo e gli errori della richiesta, mentre il resto dell’applicazione continua a funzionare normalmente.

Promise vs Async/Await

Utilizzo classico con Promise

function myFunction(id) {
  fetch("/user/" + id)
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
    })
    .catch(e => console.log("Errore nella richiesta", e));
}

Esempio con async / await

async function myFunction(id) {
  try {
    const response = await fetch("/user/" + id);
    const data = await response.json();
    console.log(data);
  } catch (e) {
    console.log("Errore nella richiesta", e);
  }
}

Gestire più richieste asincrone

async function getData(id) {
  try {
    const userResponse = await fetch("/user/" + id);
    const user = await userResponse.json();

    const albumResponse = await fetch("/album/" + user.idalbum);
    const album = await albumResponse.json();

    const articlesResponse = await fetch("/blog/" + user.idblog);
    const articles = await articlesResponse.json();

    return {
      user,
      album,
      articles
    };
  } catch (e) {
    console.log("Errore nella richiesta", e);
  }
}

Migliorare le prestazioni con Promise.all

Valutando l’esempio sopra, possiamo notare che le risorse album e articles possono essere recuperate anche contemporaneamente dopo aver recuperato user, quindi potremmo cambiare il nostro codice per sfruttare le chiamate HTTP simultaneamente in questo modo:

async function getData(id) {
  try {
    const userResponse = await fetch("/user/" + id);
    const user = await userResponse.json();

    const [albumResponse, articlesResponse] = await Promise.all([
      fetch("/album/" + user.idalbum),
      fetch("/blog/" + user.idblog)
    ]);

    const album = await albumResponse.json();
    const articles = await articlesResponse.json();

    return {
      user,
      album,
      articles
    };
  } catch (e) {
    console.log("Errore nella richiesta", e);
  }
}

In questo modo dopo aver atteso il completamento della prima richiesta, che contiene i parametri necessari per completare le successive, attendiamo il risultato di promise.all() che eseguirà le restanti chiamate simultaneamente.

Grazie JS!
Per saperne di più su promise ti riamando qui.