Trascrizione: (click per espandere)

salve a tutti in questo video parlerò
delle Promise le Promise sono uno
strumento molto usato è un nuovo oggetto
built-in di javascript che viene usato per
lavorare con le operazioni asincrone e
viene usato al posto di usare troppe
callback una Promise può avere tra
stati e lo stato di pending mentre io ho
fatto una richiesta al server e sto
aspettando una risposta del server in
questo caso la mia Promise e' in pending
poi ho lo stato di fulfill se la risposta
del server è positiva e quindi è
ritornata i dati che ho richiesto o
viene rigettata perché c'è un errore del
server
andiamo a vedere come si crea una
Promise
allora io creo una variabile la chiamo
prom e keyword new Promise e dentro ci
passò una call back che ha due argomenti
risolve che serve per risolvere la
Promise e quindi passare allo
stato fulfill e reject che serve per
rigettare la Promise e farla
passare allo stato reject una volta
che una promessa è in fulfill o in
reject non può più cambiare il suo stato
andiamo a vedere
e allora qui io adesso vado a risolvere
la mia Promise e Promise risolta adesso
vado ad usare la mia Promise allora prom
si usa il metodo then() se la Promise
viene risolta e didattiche catturati dal
metodo then che qui si mette dati o
meglio response
vengono si può andare a manipolare
questi dati sono i dati ritornati dal
mio risolve quindi io posso mettere con
sul log res
se la Promise viene rigettata si usa il
catch e l'errore viene catturato del mio
catch console.log errore allora adesso
la mia Promise io la sto risolvendo
quindi sicuramente la mia Promise
verrà intercettato dal mio then() anzi
come posso mettere errore così si
capisce quindi verrà intercettata dal
mio then() quindi io adesso salvo il file e
come vedete Promise risolta adesso io
la voglio rigettare diciamo sì quindi io
qua la rigetto e Promise rigettata
adesso io salvo ancora e come vedete la
pro mesi e rigettata viene catturata dal
mio catch infatti dice errore Promise
rigettata la Promise la posso
rigettare io manualmente oppure si
autorigetta perché c'è un errore del
server
abbiamo detto che la Promise è sempre in
lavora in maniera asincrona quindi anche
se io adesso ci metto giusto per far
vedere che e' in asincrono console.log
inizio e poi ci metto fine
come vedete qui ho messo un console.log all'inizio poi uso la mia Promise
che dovrebbe venire essere risolta e
quindi dovrebbe farmi l'output di
Promise risolta e poi ho messo fine
andiamo a vedere cosa succede come
vedete io inizio fine e Promise risolta
perché come vi dicevo la Promise viene
sempre manipolati in maniera asincrona
quindi javascript prima esegue tutto
il codice poi ritorna a lavorare con il
codice asincrono adesso vi faccio vedere
come usare una Promise in una vera chiamata a un
serve allora commento questo e mi faccio
allora se vi ricordate nel video che
parlava di ajax io ho usato questa
funzione qui per fare una chiamata al
server e per un file e json e
poi facevo il parsing del file json con
converti json adesso io vado a usare
usare questa chiamata ajax però per un
server che e' online
vi faccio vedere dove vado a chiamarlo è
questo sito qui coinmarketcap è un
sito di cryptocurrency però mi va bene
far vedere come esempio perché ha delle
"API" pubbliche
questo è il sito se adesso io schiaccio
qui su bitcoin e vado su tools come
vedete questo è un link dove io posso
trovare un "API" è questo questa "API" ritorna un oggetto json con tutti i
valori del bitcoin adesso non mi
interessa però mi interessa vedere che
c'è questa "API" qui per bitcoin
andiamo a vedere come possono usare
la mia funzione ajax per recuperare
questo oggetto allora io torno qui sulla
mia pagina
come vedete io ho la mia funzione carica
file qui apro la chiamata con un metodo
get e questo è l'indirizzo delle "API"
true per asincrono poi spedisco la mia
chiamata e quando tutto qua è tutto
funziona bene converto il mio oggetto
json in javascript e vado a fare la
visualizzazione del mio oggetto niente
di nuovo a parte che invece di fare la
chiamata verso un server del mio
computer faccia una chiamata verso un
server online quindi dovreste avere già
chiaro come funziona adesso io metto un
evento onload per fare per invocare la
funzione ecco qui adesso vediamo cosa
succede io salvo a carica file
ecco vedete adesso io ho fatto la
chiamata ajax e questa è la risposta a
ciò il mio valore dei bitcoin sotto
forma di oggetto javascript
adesso vi faccio vedere lo stesso
esempio però usando le Promise allora
intanto andiamo a modificare questa
funzione leggermente allora questa
funzione qui ritornerà una Promise
allora metto return new Promise e dentro
ci passo abbiamo detto risolve e reject
ecco qui di stampo dentro allora
faccio sempre la mia chiamata
ajax nulla è cambiato però qui adesso
invece di fare di invocare in converti
json faccio il risolve quindi vado a
risolvere la mia Promise
con l'argomento risolve
e qui metto anche giusto per farvi
vedere che se qualcosa va male tipo
faccio una chiamata usandolo Url
sbagliato e quindi ricevo un 404 e
metto this.status uguale 404
abbiamo detto allora in questo caso vado
a rigettare la Promise con new error e
qui ci passò la risposta del server con
l'errore e poi ci aggiungo anche giusto
per completezza un xhttp onerror
quindi se qualcosa va male nella
connessione ci passo questa funzione
dove vado a rigettare ulteriormente la
mia Promise reject ecco quindi se
tutto va bene risolvo la mia Promise se
c'è qualcosa di sbagliato nella risposta
del server
la viene intercettata qui e rigetto la
mia Promise
se c'è qualcosa di sbagliato nella
connessione viene
usate beccata qui e viene
rigettata la Promise adesso vado un
attimo a modificare e questo converti
json adesso io
allora invoco la mia funzione carica file
ecco qui la mia funzione carica file mi
ritorna una Promise quindi io posso
invocare il metodo then() e la risposta del
server
la vado a fare il parsing della risposta
quindi cost posso mettere dati allora
json.parse risposta e poi posso andare
a fare anche l'output dati se c'è qualcosa
che va male nel mio catch vado a
intercettare l'errore ecco qui e vado a
fare l'output dell'errore
ecco qui adesso vado a invocare questa
mia funzione nell'evento onload
andiamo a vedere cosa succede eccolo qua
come vedete sto usando la stessa
chiamata però sotto forma di Promise e
come vedete ho il mio valore di bitcoin
se io facevo una chiamata verso un Url che
non esisteva per esempio qua cambio
qualcosa ecco così quindi riceverò un 4
0 4 e quindi avrò questo errore qui come
vedete errore nel onreadystatechange è un
ready state change e quindi un errore
qui se io facevo una chiamata però
scrivevo qualcosa di sbagliato quindi la
chiamata era proprio sbagliata tipo
cancellando una lettera qui l'errore
viene raccolto da questo onerror e viene
visualizzato
xmlhttprequest is not define perché
c'è un errore
con questo è tutto
ci sentiamo il prossimo video dove
parleremo ancora delle Promise un po più
a fondo
ciao