Pubblicato il

js

javascript

callback

promise

Ciao a tutti e benvenuti a questa guida e spiegazione su cosa sono le promise in JavaScript e come vanno usate.

In questa guida andremo a spiegare in parole povere cosa sono le promise di JavaScript e come le possiamo utilizzare per evitare il famoso callback hell.

Vi siete mai trovati a scrivere una funzione in JS che per eseguire ha bisogno di aspettare che un’altra funzione finisca? Ora immaginate di avere una situazione simile, dove sono preseti molte funzioni f1, f2, f3, … fn dove ogni funzione f i deve aspettare il completamento della funzione precedente f i-1.

cosa sono le promise di javascript e come evitare il callback hell

Per codificare questo tipo di programma si potrebbe pensare a fare uso delle callback di JavaScript (cosa sono le callback in JS). Ma quando si tratta di lavorare con molteplici funzioni legate l’un l’altra, se facciamo uso delle callback, il nostro codice potrebbe risultare in un mostro del genere:

(codice da callbackhell.com)

fs.readdir(source, function (err, files) {
    if (err) {
        console.log('Error finding files: ' + err)
    } else {
        files.forEach(function (filename, fileIndex) {
        console.log(filename)
        gm(source + filename).size(function (err, values) {
        if (err) {
            console.log('Error identifying file size: ' + err)
        } else {
            console.log(filename + ' : ' + values)
            aspect = (values.width / values.height)
            widths.forEach(function (width, widthIndex) {
                height = Math.round(width / aspect)
                console.log('resizing ' + filename + 'to ' + height + 'x' + height)
                this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
                    if (err) console.log('Error writing file: ' + err)
                    })
                    }.bind(this))
                }
            })
        })
    }
})

Come potete vedere il codice JS risulta complicato e difficile da capire.

E se invece delle callback esistesse un altro modo per eseguire delle funzioni dipendenti l’un l’altra? Ecco dove entrano in gioco le promises.

Consideriamo un esempio: Se facciamo una promessa di finire i compiti, quando arriva la fine della giornata o abbiamo mantenuto la promessa o abbiamo fallito nel mantenerla. 

In JavaScript una promise (promessa) è molto simile al concetto di promessa nella vita reale.

Vediamo come creare una semplice promise e spighiamo il suo funzionamento:

Creare una promise in JavaScript

Una promise in JS è molto semplice sia da creare che da capire. Per creare la nostra prima promise con JavaScript, usiamo il seguente codice:

let promessaCompiti = new Promise(function(resolve,reject){
    eseguiCompiti(); // una funzione da eseguire
});


Come potete vedere creiamo una nuova promise con l’uso del comando  new Promise . Questa nuova promessa richiede una funzione da eseguire che accetta due parametri: resolve e reject. La funzione resolve verrà utilizzato se la promessa è mantenuta (successo) e reject verrà usata se la promessa non è mantenuta (fallimento).

Scriviamo quindi la nostra promessa di finire i compiti:

let promessaCompiti = new Promise(function(resolve,reject){
    var fatto = false;
    if(fatto)
        resolve("fatti");
    else
        reject("non fatti");
});


Come vedete nella funzione in alto chiamiamo l’oggetto resolve() se fatto = true (compiti sono stati fatti) altrimenti chiamiamo reject() (compiti non fatti).

Se proviamo ad eseguire questo codice vedremo un errore del tipo Uncaught promise.
Questo è perché non abbiamo specificato cosa fare quando la promise ha successo o fallisce. Vediamo come specificare il codice di risposta alla promise:

let promessaCompiti = new Promise(function(resolve,reject){
    var fatto = false;
    if(fatto)
        resolve("fatti");
    else
        reject("non fatti");
});
promessaCompiti.then(function(statoCompiti){
    console.log('I compiti sono: ' + statoCompiti);
}).catch(function(statoCompiti){
    console.log('I compiti sono: ' + statoCompiti);
});

Ogni promise in JavaScript ha una funzione then() che sarà eseguita al completamento della promise. Come vedete usiamo la funzione then sulla promessaCompiti per loggare il testo proveniente da resolve. Con catch() facciamo una cosa simile a then() ma logghiamo il testo proveniente da reject.

Codice JS disponibile su questo JSFiddle

Ora consideriamo un nuovo esempio dove abbiamo una serie di funzioni che devono essere eseguite in sequenza. Mantenendo il tema dei compiti consideriamo questo caso:

Dobbiamo fare i compiti di fisica in questo ordine:

  1. Studiare la teoria
  2. Fare gli esercizi
  3. Scrivere la relazione

Una volta fatti i compiti possiamo uscire con i nostri amici.

Se consideriamo un approccio callback, possiamo modellare questo problema nel seguente modo:


studiareTeoria(function(){
    fareEsercizi(function(){
        scrivereRelazione(function(){
            uscireConAmici();
        })
    })
});

Come vedete stiamo andando verso un callback hell. Possiamo semplificare questo codice con l’uso delle promise nel seguente modo:

let studiareTeoria = function(){
    return new Promise(function(resolve,reject){
        resolve("fatto");
    });
}
let fareEsercizi = function(){
    return new Promise(function(resolve,reject){
        resolve('fatto');
    });
}
let scrivereRelazione = function(){
    return new Promise(function(resolve,reject){
        resolve('fatto');
    });
}
let uscireConAmici = function(){
    studiareTeoria()
    .then(fareEsercizi)
    .then(scrivereRelazione)
    .then(function(){
    console.log('possiamo uscire!');
});
}

Come vedete ogni funzione restituisce una promessa che viene utilizzata dalla funzione successiva.


Ci siamo! questo è tutto di cui abbiamo bisogno per cominciare ad utilizzare le promise in JavaScript. 

Se avete dubbi al riguardo dell’uso delle promise in JS commentate in basso e sarò lieto di aiutarvi  

Iscrivetevi alla newsletter per ulteriori informazioni e guide su JavaScript ed altro. 

Grazie per aver seguito la guida, ci vediamo alla prossima 

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews