Categorie
JavaScript Web development

Promise JavaScript: definizione ed esempio pratico

Le Promise sono una delle funzionalità più utilizzate di JavaScript.

In questo articolo avrai modo di approfondire i meccanismi di funzionamento di questa classe, anche attraverso l’utilizzo di un esempio interattivo.

Promise in JavaScript: cosa è

La Promise di JavaScript è un oggetto che consente di gestire l’esito di una operazione asincrona.

Utilizzando questo oggetto è possibile definire porzioni di codice che verranno eseguite quando la Promise avrà terminato la sua esecuzione, oppure sarà fallita.

Per chiarire meglio il funzionamento di massima di una Promise, ecco un estratto di codice:

const myPromise = new Promise((resolve, reject) => {
  // codice asincrono che determina se viene chiamata resolve()
  // oppure se viene chiamata reject()
});
myPromise
  .then(gestisciSuccesso, gestisciFallimento)
;

Nell’estratto di codice, all’interno di myPromise può essere eseguita un’operazione asincrona, ad esempio una chiamata HTTP.

I metodi gestisciSuccesso o gestisciFallimento verranno invocati quando l’esecuzione di myPromise completerà.

L’esecuzione della Promise sarà considerata come fulfilled se sarà invocato il metodo resolve(), mentre avrà stato rejected se invece il metodo reject() sarà stato invocato.

Una Promise è sempre in uno dei seguenti stati:

  1. pending
  2. fulfilled
  3. rejected

Promise JavaScript: un esempio pratico

Sotto questo paragrafo puoi trovare un esempio pratico di utilizzo delle Promises.

In questo esempio ho implementato un simulatore di corse.

Puoi selezionare il numero di partecipanti ed avviare la simulazione cliccando il pulsante “Avvia simulazione”.

Ciascun partecipante inizierà la propria corsa da sinistra, percorrendo tutto lo spazio disponibile verso destra.

Quando un partecipante termina il proprio percorso, il simulatore visualizza la propria posizione di arrivo.

Estratti di codice per implementare il simulatore

In questa sezione dell’articolo includo alcuni estratti di codice per aiutarti a comprendere il funzionamento delle Promises.

Per iniziare, introduco la definizione della classe Runner.

class Runner {
    constructor(runnerId, simulatorInstance) {
        this.runnerId = runnerId;
        this.simulatorInstance = simulatorInstance;
        this.currentPosition = 0;
        this.intervalTimerId = null;
    }
    step() {
        this.currentPosition += Math.random() / 50;
        this.simulatorInstance.updateRunnerPosition(this.runnerId, this.currentPosition);
        console.debug("runnerId", this.runnerId, "position", this.currentPosition);
    }
    static hasArrived(runnerPosition) {
        return runnerPosition >= 1;
    }
    run() {
        const runnerInstance = this;
        return new Promise((resolve, reject) => {
            this.intervalTimerId = setInterval(() => {
                runnerInstance.step();
                if ( Runner.hasArrived(runnerInstance.currentPosition) ) {
                    clearInterval(runnerInstance.intervalTimerId)
                    resolve(runnerInstance)
                }
            }, 500)
        });
    }
    destroy() {
        clearInterval(this.intervalTimerId);
    }
}

Ogni concorrente nel simulatore è modellato da una instanza di Runner.

Il movimento viene avviato invocando il metodo run().

Come puoi vedere, questo metodo crea una Promise.

Quando questa completerà, il simulatore saprà che quel concorrente ha raggiunto la meta.

Utilizzando il metodo setInterval(), viene programmato il movimento del concorrente eseguito in maniera periodica.

Se vuoi, puoi approfondire l’utilizzo di questa funzione nell’articolo dedicato a setTimeout.

Questo metodo ha un meccanismo di azione del tutto analogo a setInterval.

Metodi disponibili nelle Promise

JavaScript mette a disposizione diversi metodi per gestire le Promises.

Di seguito riporto i principali:

  • all()
  • allSettled()
  • any()
  • catch()
  • finally()
  • race()
  • reject()
  • resolve()
  • then()
  • withResolvers()

Puoi trovare tutta la documentazione alle Promise ed ai suoi metodi nella documentazione di MDN.

Approfondimenti

In questo blog puoi trovare numerosi contenuti relativi a JavaScript e al Web Development.

Eccone alcuni:

Conclusioni

In questo articolo hai avuto modo di scoprire il funzionamento delle Promise di JavaScript.