Tempo di lettura: 4 minuti
La traduzione letteraria delle Promises in javascript è Promessa il cui concetto è legato all’esecuzione di codice in modo asincrono rispetto alla richiesta.
Per capire meglio il concetto delle Promises facciamo un paragone di vita quotidiana:
ad esempio quando andiamo alla Poste non appena entriamo ritiriamo il numero in base al servizio richiesto. Se ,sfortunatamente abbiamo diverse persone avanti ,cosa facciamo aspettiamo li oppure ne approfittiamo per fare altro?
Se si opta per la seconda soluzione , cioè se nel frattempo fai altro, senza saperlo stai applicando il principio della programmazione asincrona, in quanto hai ricevuto la promessa che, quando sarà visualizzato il tuo numero, toccherà a te.
Nel momento in cui questo non avvenisse, nel senso che qualcuno ti passasse avanti, ti arrabbieresti andando in errore!
Le promises in javascript
Quando scriviamo istruzioni in javascript queste vengono eseguite in sequenze, ossia una riga alla volta.
Ciò vuol dire che ogni riga deve essere interamente eseguita prima di procedere a quella successiva, stiamo parlando di programmazione sincrona.
Nella programmazione asincrona invece si può passare alle righe successive anche se quelle precedenti non hanno terminato l’esecuzione.
Un esempio tipico è quando si vogliono mostrare delle immagini senza bloccare l’interfaccia per il tempo necessario al download.
Esattamente quello che accade quando trovi fila alla posta e te nel frattempo vai a comprare il latte o il pane.
Promise e callback
Il concetto di promise in javascript è simile a quello di callback. E’ come se nel programma che stiamo compilando inserissimo un segnaposto con la promessa di occuparlo il prima possibile con un dato ed in cambio il programma ci dia la possibilità di proseguire con le righe successive.
Affinchè si possa adottare il concetto di Promise in javascript è necessario adottare la notazione delle “Arrow function” o funzioni freccia.
Vediamo un esempio ipotizzando di aver creato un’applicazione che mostri in sequenza una serie di immagini dove la funzione “image()” restituisca una promise di un’immagine. Per evitare che il codice si blocchi si potrebbe scrivere:
image(img).then(
(data) => { showImg(data) }
)
dove:
- attendiamo che l’immagine venga restituita dal server remoto mediante la logica progettata all’interno della funzione image().
- Non appena questa immagine o dato risulta disponibile ,(then) lo recupero come se fosse il parametro di ingresso della funzione callback.
- La mostro richiamando la funzione showImg().
Il metodo then() sarà utilizzabile solamente se la funzione in essere restituisca una promise in quanto il suddetto metodo viene fornito dalla classe Promise.
E’ importante sapere che una promise restituisce sempre un solo dato o pacchetto a differenza degli Observable i quali restituiscono un flusso continuo di dati.
Promise con dati remoti
Come detto ,oramai svariate volte nel corso del tutorial, le promises in javascript si utilizzano in caso di ricezione dati da un server remoto.
Un esempio classico potrebbe essere quello di una lista di news di un blog o di un sito di redazione giornalistica, dovesi potresti scrivere un codice simile:
function image(img) {
return new Promise(
function (resolve, reject) {
// interrogo il server remoto per recuperare il dato
if (···) {
resolve(value); // restituisco il Promise in caso di successo
} else {
reject(reason); // restituisco
}
});
}La funzione restituisce un oggetto Promise il quale può essere paragonato ad una sorta di segnaposto che verrà ,in seguito, popolato con i dati promessi, non appena sarà richiamato il metodo resole().
In caso di errore verrà richiamato il metodo reject().
In pratica quello che si fa è trasformare i dati in una promise, richiamando la relativa classe e il metodo resolve.
Un esempio completo lo puoi trovare a questo link – Recupero Immagine con Promise