Promise in JavaScript: tutorial con then, catch e Promise.all

• maPromesse è la variabile che contiene l’oggetto Promise.
• resolve e reject sono funzioni fornite dal costruttore Promise.
• Il codice dentro la funzione definisce l’azione della promise.
• Se l’azione riesce, si chiama resolve con un messaggio di successo (facoltativo).
• Se l’azione fallisce, si chiama reject con un messaggio di errore (facoltativo).

Interagire con una promise

Per gestire il risultato di una promise si usano i metodi .then() e .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() viene eseguito se la promise è risolta. Il messaggio di successo arriva come argomento.
• .catch() viene eseguito se la promise è rifiutata. Il messaggio di errore arriva come argomento.

Casi d’uso

Le promise servono a gestire le operazioni asincrone, per esempio il download di un’immagine da un server. Invece di bloccare il codice in attesa della fine del download, la promise permette di eseguire altre azioni e di gestire il risultato appena è disponibile.

Sostituire i callback

Le promise sono un’alternativa più leggibile ai callback annidati. Ecco un esempio di conversione di una funzione basata sui callback in una funzione basata su una promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Codice della funzione ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Codice della funzione ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Usare .then() e .catch() rende il codice più chiaro ed evita il «callback hell».

Metodi avanzati

• Promise.all(): esegue più promise in parallelo e restituisce un array dei risultati quando tutte sono risolte.
• Promise.race(): esegue più promise in parallelo e restituisce il risultato della prima promise risolta o rifiutata.

Conclusione

Le promise sono uno strumento potente per gestire le operazioni asincrone in JavaScript. Permettono di scrivere codice più leggibile ed evitano i problemi dei callback annidati. Riprendi gli esempi del video e mettili in pratica per padroneggiare questo concetto essenziale.

Le promise in JavaScript possono sembrare complicate a prima vista, ma in realtà sono più semplici di quanto sembrino. Questo tutorial, basato sul video «JavaScript Promises In 10 Minutes» di Web Dev Simplified, ti accompagna tra i concetti chiave e la sintassi delle promise.

Concetto di base

Una promise in JavaScript funziona come una promessa nella vita reale. Ti impegni a fare qualcosa, e quella promessa può avere due esiti:

• Risolta (Resolved): la promessa è stata mantenuta.
• Rifiutata (Rejected): la promessa non ha potuto essere mantenuta.
•  

Sintassi

Per creare una promise si usa il costruttore Promise:

const succes = true; // sostituite con la vostra condizione

let maPromesse = new Promise((resolve, reject) => {
  // Codice per mantenere la promessa
  if (succes) {
    resolve("Message de succès");
  } else {
    reject("Message d'échec");
  }
});

In questo esempio:

• maPromesse è la variabile che contiene l’oggetto Promise.
• resolve e reject sono funzioni fornite dal costruttore Promise.
• Il codice dentro la funzione definisce l’azione della promise.
• Se l’azione riesce, si chiama resolve con un messaggio di successo (facoltativo).
• Se l’azione fallisce, si chiama reject con un messaggio di errore (facoltativo).

Interagire con una promise

Per gestire il risultato di una promise si usano i metodi .then() e .catch():

maPromesse
 .then((message) => {
    console.log("Succès:", message);
  })
  .catch((erreur) => {
    console.log("Erreur:", erreur);
  });

• .then() viene eseguito se la promise è risolta. Il messaggio di successo arriva come argomento.
• .catch() viene eseguito se la promise è rifiutata. Il messaggio di errore arriva come argomento.

Casi d’uso

Le promise servono a gestire le operazioni asincrone, per esempio il download di un’immagine da un server. Invece di bloccare il codice in attesa della fine del download, la promise permette di eseguire altre azioni e di gestire il risultato appena è disponibile.

Sostituire i callback

Le promise sono un’alternativa più leggibile ai callback annidati. Ecco un esempio di conversione di una funzione basata sui callback in una funzione basata su una promise:

function watchTutorialCallback(successCallback, errorCallback, erreur = false) {
  // ... Codice della funzione ...
  if (erreur) {
    errorCallback("Message d'erreur");
  } else {
    successCallback("Message de succès");
  }
}

function watchTutorialPromise(erreur = false) {
  return new Promise((resolve, reject) => {
    // ... Codice della funzione ...
    if (erreur) {
      reject("Message d'erreur");
    } else {
      resolve("Message de succès");
    }
  });
}

Usare .then() e .catch() rende il codice più chiaro ed evita il «callback hell».

Metodi avanzati

• Promise.all(): esegue più promise in parallelo e restituisce un array dei risultati quando tutte sono risolte.
• Promise.race(): esegue più promise in parallelo e restituisce il risultato della prima promise risolta o rifiutata.

Conclusione

Le promise sono uno strumento potente per gestire le operazioni asincrone in JavaScript. Permettono di scrivere codice più leggibile ed evitano i problemi dei callback annidati. Riprendi gli esempi del video e mettili in pratica per padroneggiare questo concetto essenziale.