Javascript Tutorial Italiano 20 - Cosa sono le Promise

buongiorno a tutti bentornati episodio numero 20 del corso di javascript quest'oggi andiamo nel dettaglio a guardare le promis ok promises e l'abbiamo già viste fanno parte della synchronous programming come scritto qua andiamo a vedere la l'ordine del giorno che abbastanza lungo cosa sono appunto le promis il primo call e call back il miglioramento tramite la sintassi delle promis la sintassi delle promis cosa fare in caso di fallimento che cos'è il chaining come costruire una probabile custom e poi rifiutare in caso di errori le promis ha ben detto che sono una sorta di rappresentanza di uno

stato ok è una promessa che noi facciamo ovvero o meglio che il programma ci fa è una promessa di ritornare un valore ok è una promessa che farà una determinata azione noi non sappiamo se otterremo una risposta non sappiamo di che tipo sala il valore noi non sappiamo niente sappiamo che in modo asincrono verrà fatta una determinata azione e otterremo qualcosa più avanti in futuro ok questa è la pro mi semplicemente indica appunto è una promessa di qualcosa che verrà ridato nel futuro è attualmente indica uno stesso e vi ricordate lo avevamo visto quando a

creare una promis abbiamo lo stato new promis spending quindi è uno stato pendente finché non andiamo a lavorarci una volta che ci viene ritornato il valore questa è e lo potete trovare tranquillamente sulla documentazione semplicente volevo poi fare dei passaggi ok quindi ve l'ho messo sul sull'editor in modo da fare dei passaggi aggiuntivi questo è come sarebbe javascript ok solo con funzioni di callback senza la sintassi promis ok quindi tolgo questo noi guardiamo solo questo va bene allora noi che abbiamo una funzione questa funzione topping si chiama poi una funzione di callback ok una volta

che finito topping si chiama poi una funzione di callback a cui passa il risultato ok a cui poi chiama un'altra funzione di callback a cui passa questo risultato che a sua volta che amo un'altra funzione di callback che a sua volta che un altro record back e via discorrendo quindi sono una funzione tre funzioni callback e per ognuna dobbiamo fare una call back in caso di fallimento quindi capite si fa un po venier mal di testa a questa sintassi ok andiamo a vedere come diventa la sintassi con le pro nice andiamo subito a vedere questo

non è un esempio reale ma potete capire lo abbiamo la nostra funzione quindi seguiamo la funzione da cui ci aspettiamo una promis quindi la promessa che tornerà qualcosa una volta che mi ha fatto questo ten quindi dopo dopo questo una volta che questo sarà eseguito solo dopo che questo sarà eseguito andiamo a fare una funzione di callback ovvero ritorniamo placeholder chiamando un'altra funzione ok dopo di che andiamo a fare un altra funzione vedete qui dopo di che andiamo a farne un'altra e a differenza di queste tre failure callback ne mettiamo solo una va bene quindi

questo catch failure callback ci aiuta ad evitare queste tre mentre invece tutta questa roba qui che si aggancia diventa semplicemente 3 ben differenti che va a chiamare a sua volta delle altre funzioni ok vedete come gia piu pulito se noi volessimo pulirlo ancora di più utilizzando la sintassi scx possiamo ridurla accorciare ancora di più quanto abbiamo scritto e possiamo andare a creare ancora qualcosa di più pulito vi faccio vedere possiamo fare così qui non siamo così e quindi rispetto a prima abbiamo qualcosa di veramente più ordinato ok è veramente più bello da vedere così forse

qua possiamo fare anche così togliamo qua questo visto che non abbiamo l'eterna perfetto guardate com'è bella pulita ed effettivamente rispetto a quanto avevamo prima che era un miscuglio né di funzioni altre funzioni e fullback abbiamo semplicemente la nostra funzione 3 den è un calcio ed è tutto molto bello pulito ok quindi questo è il miglioramento che viene apportato tramite le promises e in generale poi la sintassi ds six allora guardiamo guardiamo queste tre parti la sintassi delle promis la risposta al fallimento e il chaining tramite il prossimo esempio allora prossimo esempio è il seguente liberiamo

qua tutto ok e siamo a posto allora il risultato è il seguente se 200 gli stiamo facendo il fetch su un'immagine che io qua ok caffè andiamo a vedere ecco qua il caffè perfetto quest'immagine fare impresa con fez ora si potrebbe fare in un altro modo con html eccetera non basatevi su ste cose abbiamo voluto farlo con fez per farvi vedere quindi fece abbiamo detto che è un me una funzione asincrona ok vedete qua che ci restituisce una promis questo quello che ci restituisce quando vedete qua non la funzione nome match questi sono i parametri

quindi input è un parametro che serve per forza quando invece c'è il punto di domanda alla fine di un parametro vuol dire che non è obbligatorio i due punti al di fuori le tonde indicano il valore di ritorno ok in questo caso ci ritorna una promis con una risposta all'interno allora andremo a fare il fetch come quando abbiamo fatto prima la nostra funzione andiamo ad attaccare il den per la risposta ok quindi facciamo den response vedete che stiamo usando la stessa sintassi che ho usato prima quando ho pulito tutto su cosa potete anche non concentrarvi

però ve la spiego iv la risposta non è ok quindi non abbiamo questo è l'unica cosa che possiamo ottenere che possiamo ottenere perché tutto il resto dobbiamo gestire cielo noi quindi se la risposta non è ok però new horror quindi buttiamo fuori un errore e specifichiamo che c'è un errore e prendiamo lo stato della risposta è fin qua noi in verità potremmo bypassare tutto e far semplicemente così ok però questo è un passaggio extra se volete copiarlo va bene imparate poter cercare i vari pezzi non abbiamo mai parlato dei tre error e cose del genere

quello che ci interessa è qua quindi puliamo questo però spiegato era importanti ma puliamo lo stesso abbiamo un return che abbiamo la risposta prendiamo la risposta e torniamo e ritorniamo risposta appunto blob avevamo già parlato del blob in questo caso è baia dei large object in questo caso è un'immagine è binary ed è un large object perché le immagini sono abbastanza pesanti ok fatto questo andiamo a fare il chaining chanin vuol dire concatenare quindi ogni volta che noi col punto andiamo ad agganciare un den o dei che stiamo concatenando ok quindi ne potremmo avere tanti

bene che non avete non avete idea quanti ne potremmo sono infiniti quindi siamo andati a prendere la nostra immagine abbiamo gestito la risposta abbiamo lavorato sulla risposta e l'abbiamo abbiamo fatto ritorna in modo che queste ritorno qua diventa questo elemento perché facendo il chaining automaticamente il contenuto che viene ritornato in questa funzione viene passato a questo den ok quindi hilden noi abbiamo chiamato my blog perché è il blog che noi portiamo fuori che sarebbe comunque il nostro banali large object ok quindi è la nostra immagine per chiamarla mai mg m g quello che volete andiamo

a prendere l'url ok nemo creare l'url che ci servirà poi da inserire per mg src quindi noi prendiamo questo url e dell'immagine andiamo a creare l'immagine documenti creati elementi mg quindi è banalmente come fare di mgs rc qua ok lo stiamo andando a creare real time con javascript dopo richiediamo mettere qua dentro qua dentro creato dinamicamente andiamo buttarci dentro object punto url ok e poi facciamo semplicente documento body up and child non preoccupatevi che la gestione del documento con javascript la faremo negli ultimi episodi ok qualcosa avete già imparato sicuramente però la tratteremo bene dopo

quindi questo abbiamo fatto il cen in gabbia gestito tutto qui abbiamo fatto fetch abbia preso la risposta l'abbiamo gestita l'abbiamo sistemata l'abbiamo ritornata abbiamo preso il nostro blog abbiamo creatore l'elemento abbiamo appeso tutto quello che ci serviva alla fine sempre con channing andiamo mettere un cash quindi risposta in caso di fallimento il catch è la risposta in caso di fallimento se qualcosa va male a qualsiasi livello ok automaticamente il catch va a prenderlo e lo possiamo gestire quindi che c'è e sta per errore lo vedete spesso scritto come and error error così fateci l'abitudine in

questo caso e console ogg andiamo a prendere il messaggio di errore e prima lo pompiamo con un altro messaggio nostro ok andiamo a spiegare perché poi ci buttiamo il messaggio di errore che potrebbe essere magari un po criptico perciò ci aiutiamo con questo messaggio questa in breve la sintassi delle promis e adesso vediamo con due esempi veloci come creare una propria promis ok qua stiamo già usando quelle che arrivando a fece c'era ma magari avremmo bisogno di creare noi delle nostre promis come possiamo fare allora qui abbiamo creare una promis veramente semplice allora stiamo prendendo

una variabile e stiamo facendo new promis ok new promis andando a fare il new promis fatemi togliere un attimo qua allora new promis è così ok come quando facciamo come ha fatto new persona molto prima nel nostro corso vogliamo fare un nuovo oggetto che nuovo oggetto promis nuovo oggetto promis tiene una funzione all'interno ok da eseguire quindi la prova miss deve andare eseguire un'azione in questo caso facciamo una funzione ok abbiamo la funzione e dentro abbiamo sette mouth l'importante è la funzione dimenticato in un attimo questa parte qua centrale concentratevi solo su graffa graffa qui

ok quindi questo è il mio promis funzione la promis può avere solo due risultati ok o viene risolta e quindi va tutto come deve andare oppure viene rigettata in questo caso rejects questi sono i due parametri che abbiamo andiamo a fare la nostra funzione è quello che ci mettiamo dentro semplicemente diciamo guarda tra due secondi mi fai un time out quindi non mi fai niente ticket a due secondi mi fai risolve quindi stiamo dicendo automaticamente la pro miss me la fai andar bene ok questo è a livello basico basico come possiamo andare a creare una

pro nice questo non ha utilità ma ve lo faccio vedere invece con questo esempio ma volevo che imparasse a capire come impostare una promo se volete riprovare per seguirmi facciamo prova uguale new promis ve lo faccio in modo che se mi seguite vi abituate andiamo a fare una nuova funzione dobbiamo fare una nuova funzione facciamo così mettiamo resolve virgola mettiamo reject perfetto andiamo a fare la nostra arrow function l'apriamo andiamo giù chiudiamo qui e dentro potete mettere quello che volete in questo caso mettiamo direttamente risolve e siamo a posto con di questa è la sintassi

super basica su come creare una promis andiamo a lato commentiamo è semplicemente apriamo il l'esempio de commentiamo l'esempio vero allora prima avevamo fatto avevano fatto qua the mouth promi solvente che anche qua questa era una variabile a cui assegnavamo una funzione anonima ok ora noi vogliamo fare una funzione reale quindi function la nominiamo time out promis anziché basarci sulla sulla variabile è semplicemente andiamo a generare un po di cose in modo da rendere questa promis da fare un esempio reale ok quindi basiamoci su questo noi facciamo una function facciamo la funzione che dobbiamo eseguire e

che deve ritornare una promis vi ricordate che fece ritorna la promis adesso non ce l'abbiamo più pace ma vi ricorda che fece ritorna una pro m'iscrivo dire che qualsiasi cosa noi facciamo qualsiasi funzione che facciamo deve tornare una promis altrimenti non funziona quello che dobbiamo fare quindi la nostra funzione la nostra funzione vediamo qua dove ok è qui in questa è la nostra funzione basica a cui lavoriamo con message e inter va a queste sue cose diverse che non che esulano dalla promises se questo è puramente la nostra funzione come deve agire ora la nostra

funzione deve ritorno mare una promis ok fin qua ci siamo altrimenti non se ne fa niente questa promis se vi ricordate da qua sopra all'interno deve fare qualcosa ok deve avere una funzione che può essere risolta ora è gettata andiamo dentro ora in questo esempio facciamo vedere come il messaggio che sono i parametri della funzione e quindi in questo caso la facciamo andare la facciamo risolverlo rigettare in base a quelli che sono i parametri della funzione ok quindi se messaggio è uguale uguale zero o il tipo di messaggio è diverso da stringhe qui magari abbia

messo un numero quindi se il messaggio è vuoto oppure il messaggio è uguale uguale estremi in questo caso potrebbe essere vedete qua c'è la funzione se il messaggio è nullo o è un numero ci darà problemi ok quindi torniamo a noi questo sarà un primo problema e ci darà re gect è il siff se l'intervallo è minore di zero quindi se questo intervallo è meno uno meno uno o addirittura non è un numero ma è una stringa ci darà errore ok quindi facciamo così e noi per ora siamo a posto altrimenti se ci sono problemi

coi parametri mela rigetti in tutti i casi e mi specifici quali specifichi qual è il problema ovvero il messaggio è vuoto o non è una stringa oppure l'intervallo è negativo o non è un numero e quindi fire e gect e la promis ci ridà re gect se tutto se tutto questo va bene allora mi fa il mio set time out e magari soldi quindi 7 di mano tra le messe appunto per far vedere un po di asincrono ok altrimenti sarebbe tutto purtroppo veloce semplicemente risolve e ci mandi il messaggio ok andiamo a vedere quindi questa

time out come la utilizziamo se vi ricordate prima di fare il cen in condanne che abbiamo la nostra funzione quindi la funzione chiama la funzione richiede due parametri che il messaggio da da mandare a schermo e l'intervallo di tempo che vogliamo di attesa quindi del set the mouth di questo è questo e questo messaggio non è altro che questo messaggio va bene una volta fatta questa una volta fatto questa la promis ovviamente ovviamente questa funzione le torna alla prova miss vi ricordate yes la promis se la promis va bene abbiamo il messaggio quindi noi prendiamo

il messaggio è semplicemente lo utilizziamo in questa funzione e mandiamo a schermo al messaggio con l'alert se qualcosa va male ovvero siamo nelle fasi dire gect cosa farà farà cash e ci manderà nel console ogg l'errore ok andiamo a vedere la situazione facciamo il primo andiamo qua vedete è loader sono passati due secondi effettivamente da quando salvato che di cosa è successo time out ha preso è loader è passato un secondo ha controllato tutto a posto tutto a posto tutto a posto ha risolto la promis la promis essendo stata risolta è passata qua dentro e

non qua dentro ha passato il messaggio che rare loader e ha mandato a schermo un alert con scritto hello there mettiamo un altro caso riproviamo andiamo qui e vedete ha fatto tutto questo giro e ne abbiamo il nostro aler con scritto è loader se invece io vado a mettere una stringa vuota quindi vado a causare l'errore val a causare questo errore andiamo a vedere qua abbiamo nel console log error message is empty isna la stringa allora questo error l'abbiamo arco dato noi qui ve lo ricordate questo è invece arriva dal cash ed è il messaggio

che viene mandato corre gect in questo caso aveva scritto né automaticamente quindi quando noi devo fare una una promis custom dobbiamo andare a mettere i messaggi i messaggi di errore ovviamente dobbiamo gestirli noi e in questo caso invece con la risolve mandiamo facciamo un return di ciò che ci interessa ok questo è io vi ringrazio per essere rimasti con me questa tua episodi abbastanza lungo e non credo semplicissimo da capire se avete qualche problema commentate sotto altrimenti c'è il gruppo su telegram c'è il canale per restare sempre aggiornati con eventuali progetti extra canale youtube sembri

programmazione comunque in descrizione trovate sempre la vetrina di amazon gli abbonamenti sembra per supportare il canale vi ringrazio ancora noi cerchiamo la prossima ciao ciao