Sono stato molto entusiasta delle Promises da quando sono state introdotte un anno fa. Anche se ci sono molti post e opinioni in giro, le promesse non renderanno il vostro codice più performante… lo renderanno più facile da leggere e da capire (che nel mio libro, spesso conta molto di più!)
Per la prima parte di questo post, spiegherò la struttura di base delle promesse. Se avete capito questo, sentitevi liberi di scorrere fino alla seconda metà del post.
Promesse spiegate in inglese semplice
Ecco la struttura di base di una Promessa in Javascript:
Piuttosto tipico (ed elusivo) snippet di codice qui. Proverò ad analizzare cosa sta succedendo.
Per cominciare, concentratevi solo sulle linee 1-15:
- C’è l’istanza. Questa linea fondamentalmente crea una promessa. Una promessa in JS ha bisogno di qualcosa da fare, un compito. Quindi la funzione che vedi passare qui – function (resolve,reject) {…} è quel compito
- Poi vedi il corpo del compito. Qui puoi fare delle cose. Da qualche parte in questo blocco di codice, devi decidere se le cose sono andate bene o no. Per esempio, se state usando questo spazio per recuperare un’immagine, o l’avete ricevuta (è andata bene)… o non l’avete ricevuta (non così bene).
- Se le cose sono andate bene, chiamerete qualche funzione che segnerà questa promessa come “risolta”. Se le cose non sono andate secondo i piani, “rifiuterete” questa promessa. (ne parleremo più in dettaglio tra un secondo)
Ora concentriamoci sulla parte rimanente dello snippet di codice, linee 17-27:
- Finora, nelle linee 1-15, hai solo definito il tuo oggetto Promise
- Nelle linee 17 & 22, fondamentalmente gli attacchi un handler
- promise.XXXX (dove XXX potrebbe essere “.then” o “.catch” ecc.) fondamentalmente esegue la funzione definita nella promessa (linee 1-15). In base a come sono andate le cose (risolte o rifiutate) chiameranno le funzioni in “.then” e “.catch” rispettivamente. Quindi se la vostra promessa è stata risolta (…le cose sono andate bene), la funzione dentro .then(…) verrà eseguita, altrimenti verrà eseguita la funzione in .catch(…).
NOTE:
- “.then(function)” ritorna una Promessa. Inoltre, potete chiamare solo “.then(…)” o “.catch(…)” su oggetti Promise.
Ora che abbiamo coperto le basi, guardiamo un esempio più interessante di quello che possiamo fare con le Promesse.
Catenamento di Promesse per eseguire richieste multiple
Problema: Recentemente, mi sono imbattuto in una situazione in cui avevo bisogno di recuperare un mucchio di URL uno dopo l’altro. Tuttavia, la risposta per ogni URL doveva essere gestita in modo diverso in base all’URL.
Per il bene di questo post, assumiamo che gli URL da recuperare siano:
- google.com
- apple.com
- amazon.com
Ecco una versione semplificata dello script che ho usato per gestire questo:
Distruggiamo questo:
- Line 1-11: Creare un semplice wrapper intorno al metodo AJAX Get fornito da jQuery. Questo passerà semplicemente la risposta al callback specificato.
- Line 18-51: Creo poi tre funzioni (sì! Funzioni!) che restituiscono una JS Promise
- Ogni promessa internamente fa questo – usa il wrapper Ajax per recuperare il suo url, e una volta ricevuti i dati/risposta, fa qualcosa con i dati e infine chiama “resolve()”
- Nella linea 54: Concateno queste promesse una dopo l’altra. Notate che ognuna di queste funzioni restituisce una promessa (e non è una Promessa in sé). Ecco perché uso “first()”.then(…) invece di “first.then(…)”
Per chiarire ulteriormente, ecco un modo di vedere la catena delle promesse.
In questo modo, è possibile ottenere in sequenza ogni URL, gestirlo come desiderato e lanciare la funzione “resolved()” per attivare la prossima Promessa nella catena:-)
Nota: se provate a eseguire il frammento di codice qui sopra nel browser, dovrete abilitare CORS. Ecco un’estensione per chrome che può aiutare a farlo con un semplice click.
Spero che questo post vi sia piaciuto.