JavaScript, Tutorial

JavaScript promise

2 min read

In JavaScript, una promise è un oggetto che rappresenta l’eventuale completamento o fallimento di un’operazione asincrona.
Le promise vengono utilizzate per gestire operazioni asincrone in JavaScript, come ad esempio effettuare richieste di rete o leggere da un file. Forniscono un modo per scrivere codice asincrono che è più facile da leggere e gestire rispetto all’utilizzo delle funzioni di callback. 
Ecco un esempio d’uso della promise in JavaScript:

 

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, World!');
  }, 1000);
});

promise.then((message) => {
  console.log(message);
});

In questo esempio, si utilizza il costruttore Promise, che accetta una funzione come argomento. Questa funzione è chiamata “funzione esecutore”.
La funzione esecutore ha due argomenti, resolve e reject, che sono funzioni che possono essere utilizzate per indicare rispettivamente il completamento o il fallimento della promise. 
Il metodo then viene utilizzato per specificare cosa dovrebbe accadere quando la promise viene soddisfatta (ovvero, quando viene chiamata la funzione di risoluzione). In questo caso, stiamo registrando il messaggio nella console. 
Le promise possono anche essere utilizzate per concatenare insieme operazioni asincrone, come questa:

 

promise
  .then((message) => {
    console.log(message);
    return message.length;
  })
  .then((length) => {
    console.log(`The message is ${length} characters long.`);
  });

 

In questo esempio, il primo blocco then registra il messaggio nella console e restituisce la lunghezza del messaggio. Il secondo blocco then riceve la lunghezza come argomento e registra un messaggio nella console.


Facciamo un ulteriore esempio di promise in JavaScript:

function loadData() {
  return new Promise((resolve, reject) => {
    // make a request to a server
    const request = new XMLHttpRequest();
    request.open('GET', 'http://example.com/data.json');
    request.onload = () => {
      // request succeeded, resolve the Promise
      if (request.status === 200) {
        resolve(request.response);
      } else {
        // request failed, reject the Promise
        reject(Error(request.statusText));
      }
    };
    request.onerror = () => {
      // there was an error, reject the Promise
      reject(Error('Error fetching data.'));
    };
    request.send();
  });
}

loadData()
  .then(data => {
    // data has been successfully loaded, use it here
    console.log(data);
  })
  .catch(error => {
    // an error occurred, handle it here
    console.error(error);
  });

La funzione loadData() restituisce una promise, che viene risolta con i dati se la richiesta ha esito positivo o rifiutata con un errore se la richiesta fallisce. 

È quindi possibile utilizzare i metodi then() e catch() per gestire l’esito della promise.