Dagli script precedenti abbiamo imparato a utilizzare tutte le varie sfaccettature delle promise, ma dobbiamo tenere presente che per la programmazione asincrona abbiamo a disposizione anche le keyword async/await. Quando è giusto usare l'una o l'altra versione?

Una risposta giusta non esiste, dipende dalle situazioni: nel caso in cui, come nell'esempio seguente, volessimo attendere il risultato di più promise, potremmo usare la keyword await per attendere la risposta.

const urls = [
  "https://mio-sito.it/users",     
  "https://mio-sito.it/users/1",
];
//array di dati
const data = [];

for (url of urls) {
  await fetch(url)
    // conversione 
    .then((response) => response.json())
    // inserimento nell'array
    .then((jsonResponse) => data.push(jsonResponse));
}

Il codice presenta però un errore logico: ogni chiamata verrà attesa prima di eseguire la successiva. Per ottenere un'effettiva esecuzione asincrona e parallela delle operazioni avremo bisogno di modificarlo, utilizzando il metodo Promise.all, e attendendone la risposta con await.

Rifattoriziamo il codice creando in primo luogo una lista delle operazioni asincrone e utilizzando la funzione per attenderne la risoluzione.

const urls = [
  "https://mio-sito.it/users",     
  "https://mio-sito.it/users/1",
];

const promises = urls.map((url) =>
  fetch(url).then((response) => response.json())
);

const data = await Promise.all(promises);