Esercizi Promise Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi delle promise o promesse in Javascript.

Esercizio 1

Creare una promise che si risolve dopo 2 secondi:

const promessa = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Promessa risolta");
  }, 2000);
});

promessa.then(function (risultato) {
  console.log(risultato);
});

Esercizio 2

Creare una promise che viene rifiutata dopo 3 secondi:

const promessa = new Promise(function (resolve, reject) {
  setTimeout(function () {
    reject("Promessa rifiutata");
  }, 3000);
});

promessa.catch(function (errore) {
  console.log(errore);
});

Esercizio 3

Eseguire una serie di chiamate asincrone in sequenza utilizzando le promise:

function eseguiChiamata(numero) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve(`Chiamata ${numero} completata`);
    }, 1000);
  });
}

eseguiChiamata(1)
  .then(function (risposta) {
    console.log(risposta);
    return eseguiChiamata(2);
  })
  .then(function (risposta) {
    console.log(risposta);
    return eseguiChiamata(3);
  })
  .then(function (risposta) {
    console.log(risposta);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 4

Gestire il caso in cui una promise venga risolta o rifiutata immediatamente:

const promessa = new Promise(function (resolve, reject) {
  if (Math.random() < 0.5) {
    resolve("Promessa risolta immediatamente");
  } else {
    reject("Promessa rifiutata immediatamente");
  }
});

promessa
  .then(function (risultato) {
    console.log(risultato);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 5

Utilizzare Promise.all per eseguire più promise contemporaneamente:

const promessa1 = eseguiChiamata(1);
const promessa2 = eseguiChiamata(2);
const promessa3 = eseguiChiamata(3);

Promise.all([promessa1, promessa2, promessa3])
  .then(function (risultati) {
    console.log(risultati);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 6

Utilizzare Promise.race per ottenere il risultato della promise più veloce:

const promessa1 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Promessa 1 risolta");
  }, 2000);
});

const promessa2 = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Promessa 2 risolta");
  }, 1000);
});

Promise.race([promessa1, promessa2])
  .then(function (risultato) {
    console.log(risultato);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 7

Utilizzare le promise per caricare dati da una risorsa esterna:

function caricaDati() {
  return new Promise(function (resolve, reject) {
    fetch("https://api.example.com/dati")
      .then(function (response) {
        if (response.ok) {
          resolve(response.json());
        } else {
          reject("Errore nel caricamento dei dati");
        }
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

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

Esercizio 8

Utilizzare le promise per effettuare una chiamata AJAX:

function effettuaChiamataAJAX(url, metodo) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();

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

effettuaChiamataAJAX("https://api.example.com/dati", "GET")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (errore) {
    console.log(errore);
  });

Esercizio 9

Utilizzare le promise per eseguire operazioni asincrone in sequenza:

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

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

operazione1()
  .then(function (risultato1) {
    console.log(risultato1);
    return operazione2();
  })
  .then(function (risultato2) {
    console.log(risultato2);
  })
  .catch(function (errore) {
    console.log(errore);
  });