Esercizi Async e Await Javascript

Ecco degli esercizi semplici con soluzione per praticare le basi sull’uso di Async e Await in Javascript.

Esercizio 1

Creare una funzione asincrona che attende un certo numero di millisecondi prima di restituire un valore:

async function attesa(ms) {
  await new Promise((resolve) => setTimeout(resolve, ms));
  return "Attendi completato";
}

async function esegui() {
  const risultato = await attesa(2000);
  console.log(risultato);
}

esegui();

Esercizio 2

Gestire l'errore all'interno di una funzione asincrona utilizzando try/catch:

async function esegui() {
  try {
    const risposta = await fetch("https://api.example.com/dati");
    const dati = await risposta.json();
    console.log(dati);
  } catch (errore) {
    console.log("Errore nel caricamento dei dati", errore);
  }
}

esegui();

Esercizio 3

Utilizzare Promise.all con async e await per eseguire più chiamate asincrone contemporaneamente:

async function ottieniDati() {
  const promessa1 = fetch("https://api.example.com/dati1");
  const promessa2 = fetch("https://api.example.com/dati2");
  const promessa3 = fetch("https://api.example.com/dati3");

  const [risultato1, risultato2, risultato3] = await Promise.all([
    promessa1,
    promessa2,
    promessa3,
  ]);

  const dati1 = await risultato1.json();
  const dati2 = await risultato2.json();
  const dati3 = await risultato3.json();

  console.log(dati1, dati2, dati3);
}

ottieniDati();

Esercizio 4

Utilizzare await con una funzione che restituisce una promessa:

function eseguiChiamata() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve("Chiamata completata");
    }, 2000);
  });
}

async function esegui() {
  const risultato = await eseguiChiamata();
  console.log(risultato);
}

esegui();

Esercizio 5

Utilizzare await con una funzione asincrona per ottenere dati da un API:

async function ottieniDati() {
  const risposta = await fetch("https://api.example.com/dati");
  const dati = await risposta.json();
  return dati;
}

ottieniDati()
  .then(function (dati) {
    console.log(dati);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 6

Utilizzare await con una funzione che restituisce una promessa rifiutata:

function promessaRifiutata() {
  return new Promise(function (resolve, reject) {
    reject("Promessa rifiutata");
  });
}

async function esegui() {
  try {
    const risultato = await promessaRifiutata();
    console.log(risultato);
  } catch (errore) {
    console.log(errore);
  }
}

esegui();

Esercizio 7

Utilizzare await con una funzione asincrona per ottenere dati da un file:

async function leggiFile(file) {
  const fileReader = new FileReader();

  return new Promise(function (resolve, reject) {
    fileReader.onload = function (event) {
      resolve(event.target.result);
    };

    fileReader.onerror = function () {
      reject("Errore nella lettura del file");
    };

    fileReader.readAsText(file);
  });
}

const fileInput = document.getElementById("file-input");
const file = fileInput.files[0];

async function esegui() {
  try {
    const contenuto = await leggiFile(file);
    console.log(contenuto);
  } catch (errore) {
    console.log(errore);
  }
}

esegui();

Esercizio 8

Utilizzare await con una funzione asincrona per ottenere dati da un database fittizio:

async function ottieniDatiDaDatabase() {
  return new Promise(function (resolve, reject) {
    // Simulazione di accesso al database
    setTimeout(function () {
      const dati = { nome: "Mario", cognome: "Rossi" };
      resolve(dati);
    }, 2000);
  });
}

async function esegui() {
  const dati = await ottieniDatiDaDatabase();
  console.log(dati);
}

esegui();

Esercizio 9

Utilizzare await con una funzione asincrona per effettuare una chiamata AJAX:

async function effettuaChiamataAJAX(url, metodo) {
  const xhr = new XMLHttpRequest();

  return new Promise(function (resolve, reject) {
    xhr.open(metodo, url);

    xhr.onload = function () {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject("Errore nella chiamata AJAX");
      }
    };

    xhr.onerror = function () {
      reject("Errore nella chiamata AJAX");
    };

    xhr.send();
  });
}

async function esegui() {
  try {
    const response = await effettuaChiamataAJAX(
      "https://api.example.com/dati",
      "GET"
    );
    console.log(response);
  } catch (errore) {
    console.log(errore);
  }
}

esegui();

Esercizio 10

Utilizzare await con una funzione asincrona per eseguire operazioni in sequenza:

async function operazione1() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve("Operazione 1 completata");
    }, 1000);
  });
}

async function operazione2() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve("Operazione 2 completata");
    }, 2000);
  });
}

async function esegui() {
  const risultato1 = await operazione1();
  console.log(risultato1);

  const risultato2 = await operazione2();
  console.log(risultato2);
}

esegui();