buongiorno a tutti bentornati episodio numero 21 del corso di javascript siamo quasi alla fine quest'oggi guardiamo come letteralmente rendere il nostro codice asincrono più facile con a sync ea weight allora la bellezza di affinché weight sono stati aggiunti nel 2017 con ekma script 17 lo vedete qua la cosa bella di affinché weight è che ci permette di rendere il codice visivamente sincrono come abbiamo scritto prima di imparare tutta questa bardella della sincrono semplicemente rendendolo effettivamente asincrono ok questo è in sostanza quello che fa a sync ea weight che cosa abbiamo la samp all'interruzione che l'abbia
l'abbiamo appena fatta nei moli dara singh a weight andiamo a riscrivere la promis dell'episodio precedente con come appunto con affinché weight però mi sol che abbastanza importante e poi vedremo velocemente a sync e wade nelle classi allora prendiamo una funzione function allo sto seguendo esattamente quello che già la documentazione quindi vi ritroverete anche voi ok fanciullo ritornello ok facciamo così noi facciamo semplicemente un console punto log andiamo a fare allo ok molto molto semplice demo del risultato e fin qui niente di strano fatto sufficiente una funzione l'ho chiamata allo e gli ho fatto ritornare una
stringa allo fin qua ci siamo cosa succede nel momento in cui metto a sync davanti ok a sync si mette davanti alle funzioni va bene dobbiamo fare a sync già al presumo sapete già la risposta vedete che ci arriva una promis benissimo quindi vuol dire che noi possiamo rendere le funzioni asincrone semplicemente con a sync punto e questo è la cosa abbastanza semplice si scrive ancora come la funzione sincrona ok se vi ricordate e qua abbiamo la nostra promis e dobbiamo gestirla per scrivere questa cosa qua abusano scrive anche come espressione ok quindi quando abbiamo
farmi sempre un prova uguale potremo fare una function una a sync function così facciamo così e ne facciamo così e siamo a posto per scriverla così altrimenti con la sintassi nuova di cui vi ho già parlato velocemente possiamo fare così e andiamo a fare il re terna di ok diciamo così chiamiamo prova andiamo a vedere come possiamo vedere promis ok abbiamo la nostra promis e quindi potrà scrivere anche così quindi potete farla come espressione e assegnarla a una variabile oppure a sync function come al solito ora il fatto è come andiamo a prendere il risultato
di questa promis è veramente semplice ci basta fare un basta fare un den quindi facciamo è lo dobbiamo fare il nostro classico den un'altra che mi ha fatto questo ci basterà fare la nostra funzione prendiamo il value prendiamo il value è semplicemente console punto log value ok non c'è nessun altro con solleverete quindi ne facciamo la nostra funzione a sync la la usiamo qui vedete facciamo il den classico visto che ritorna al valore possiamo prendere direttamente il valore come parametro dalla funzione dentro den funzione alro function abbiamo il nostro console logging prendiamo il valore salviamo
e ne abbiamo all'ok quella documentazione ci consiglia un altro modo shorthand quindi una short cut ve la faccio vedere semplicemente avendo un unico valore venne unico parametro possiamo tranquillamente scrivere console log ok io non vi consiglio imparare questa sintassi soprattutto adesso ve la faccio vedere perché la documentazione lamette perciò ve la spiego e vedete che non cambia niente allora di base non avendo un unico parametro ok avendo un unico parametro da per scontato che ben prende l'unico parametro che ci ritorna e facciamo il console og di questo parametro ok quindi non dobbiamo aprire le parentesi
non dobbiamo fare niente sufficiente gli diciamo con quello che hai qua fai un unica cosa che console log proviamo anche con alert dobbiamo fare all'art vedete che funziona ok e questa è una short cut che comunque adesso sapete ma vi consiglio di evitare andiamo a vedere invece a weight allora a sync greetings che sarebbe il saluto uguale a weight promis punto resolve abbiamo il nostro capolicchio abbiamo il nostro l ok quindi ops my dad uguale a weight promis risolve elop andiamo qua chiamiamo la nostra funzione facciamo ancora il nostro den e mandiamo il console punto
log va bene facciamo così vediamo cosa ci compare teoricamente dovrebbe uscire allo perfetto allora che cos'è wait wait è quella keyword che mettiamo quando stiamo aspettando il risultato di una promis ok quindi a sync diciamo che questa funzione è asincrona ea weight diciamo che questo greeting quindi questa variabile è uguale a un valore che stiamo aspettando ok quindi in questo momento come funziona sinché wait wait blocca completamente l'esecuzione di questa di questa riga e tutto quello che c'è qua sotto eventualmente in questa funzione finché il valore non è ritornato ok riscriviamo invece adesso il codice
che avevamo prima con le promis con a sync ea weight allora andiamo a prendere dalla documentazione che non ce l'ho più tanto fanno lo stesso esempio eccolo qua vedete writing promis con guida sync await se volete se volete provarla no se volete provare voi non guardate sotto la non guarda sotto qui le risposte semplicemente provate ok quindi né salviamo quello che andiamo a fare innanzitutto devi ammettere a sync quindi abbiamo creare chiaramente una funzione ok noi facciamo mai flash ok andiamo ad aprire e mai fece si aspetta una risposta quindi il let response è uguale
a the wait fetch match andiamo a prendere il nostro coffee e fin qui ci siamo che cosa fa poi quindi ho creato una funzione fece anziché fare questa cosa direttamente lo faccio tramite funzione perché poi li attaccheremo hilden da gestire ok quindi la sigma per forza avanti una funzione questa cosa qua la mettiamo dentro una funzione ok allora abbiamo il nostro fetch stiamo aspettando che venga affacciato appunto coffee come qui saltiamo la parte effettiva dell'errore ok quello che ci interessa è il blog ok questo my blog che poi passiamo quindi creiamo il let my blog
che è uguale a my blog è uguale al ritorno di respons ma dato che noi lo stiamo aspettando da questo fece anche questo è una weight quindi a weight è uguale a response response punto blob qua ci siamo abbiamo il nostro blog quindi ricapitoliamo abbia messo due weight perché questo la white del fez ok ed è esattamente quello che succede qua questo questo weight è esattamente come questo den va bene automaticamente ovviamente quindi noi qua stiamo aspettando questa è la promis quindi qua c'è la promis ne facciamo a weight promis dopodiché visto che questo bene
è strettamente correlato a questo questo valore deve essere anche lui in a way the in questo caso abbiamo fare a weight response punto blob che non possiamo fare response aspettando la da fece quello che facciamo dopo è prendere questa parte qua che è esattamente uguale ok abbiamo qua tutto quello che dobbiamo andare a fare adesso è chiamarla funzione my fair è semplicemente alla fine gli andiamo attaccare il catch molto molto semplice salviamo vediamo il risultato se ci arriva l'immagine abbiamo fatto tutto corretto anzi cancelliamo per sicurezza salviamo andiamo a vedere e vedete che ci arriva
e ci arrivata con con successo e quindi ecco qua la nostra immagine e abbiamo riscritto cuesta pappardella lo vedete che è scritta chiaramente in una sintassi differente e per qualcuno potrebbe essere fastidiosa l'abbiamo riscritta in una sintassi che è molto più amichevole ok è molto più amichevole per l'occhio e quindi come potete vedere è quindi abbiamo visto anche come funziona semplicemente andando a riscrivere questo codice vediamo velocemente come gestire gli errori li possano gestire in due modi fatemi togliere questa parte essendo funzioni simp scritte come funzioni sincrone possiamo gestirla anche contrae e che quindi potremmo
tranquillamente fare tra i scusatemi potremo fare tra i emettiamo qua diciamo così tra i e poi facciamo che prendiamo equa questo è l'errore mettiamo qua dentro e noi siamo a posto ok quindi semplicemente si tratterà di fare così e avremo qua dentro l'errore fatemi scusate fatemi fare qua potremmo avere una cosa del genere e noi semplicemente togliamo quindi ovvero gestite così dipende se piace a voi oppure lo lasciate call call che c'e e non avete nè tra i next qui ok potete sceglierlo come gestirlo per questo caso teniamo tutto in stile sincrono e lasciamo questa
sintassi speriamo velocemente le provi soul e gli assi che white nelle classi spostiamoci sulla documentazione perché dandolo fa vedere due cosine non conviene nemmeno stare a mettere in piedi tutto il codice per due cosine awaiting promis all allora zoomiamo si vede ok si vede meglio a wave pro mi sol è di base questa parte qua ok che cosa fa sostanzialmente ve lo faccio vedere anziché avere come noi qua un unico fece e abbiamo una risposta con un unico fece quindi ci aspettiamo una sola immagine qua ce ne aspettiamo 3 come potete vedere aspettiamo il caffè
il tè e aspettiamo una descrizione punto txt fin qua ci siamo questa funzione una funzione custom la vedete qua è una funzione che chiede l'url e che tipo è quindi immagine immagine testo quindi questa funzione come vedete un po di roba lasciatela perdere poi è sufficiente che pensate che questa funzione face and e cod non fa altro che andare a prendere due parametri che l'url dell'immagine o del file che ci interessa e specifichiamo il tipo che ci interessa perché ovviamente in base a quello dovrà andare a gestire in diverso modo veteres post punto blob l'abbiamo
già visto e response punto tex va a prendere il testo tutta questa roba qua semplicemente per dirvi questo vedete qualche c'è il fetch quindi quello che facevamo prima vedete response punto fece la stessa cosa che abbiamo messo qua a response fece semplicemente andato a generalizzarlo in modo da poterlo fare automaticamente senza doverlo scrivere ogni volta altrimenti poteva essere falciati fetch txt insomma avete capito che diventava fastidioso quindi andato a fare un'unica funzione generalizzante e qua ci siamo torniamo a noi quindi che cosa fa questi 3 adesso sono degli a wade come potete vedere teoricamente dovrebbe
esserci una weight qui va bene anziché mettere tre weight differenti quindi away the chain cod come abbiamo fatto qui ritorna anziché far così lui dice sai cosa c'è a wade promis all quindi anziché avere la promis anziché avere un'unica promis come abbiamo visto prima che avevamo fatto promis risolve se poteva fare a weight promis all quindi mi aspetti tutte le promis che ci sono che derivano da queste e cosa dice le tre promis sono queste ovviamente noi qua sta ritornando una promis vedete a sync quindi ritorna la promis noi ce l'abbiamo quindi possiamo metterle dentro
che provi solo accetta tante promis quindi fa un array di promis di in un'altra volta prof promis ok qui abbiamo coffee ti hann description e fa a weight su tutte quello che ritorna è un array di valori quindi poi si tratterà di andare a prendere vedete qua crea due immagini crea due immagini e crea del tè il testo lo prende da value spunto da values due perché se ricorda sono tre elementi nella regione 012 lo zero è il caffè se vi ricordate l'uno è il tè e il 2 e il sud a tunisi il numero
due è il terzo che sarebbe il testo dopo penne tutto document borea pancia il bla bla alle sue immagini e chi s'è visto s'è visto lui anziché fare tra in cash decidi mettere che aci in fondo per avere un codice più pulito effettivamente è più pulito più bello da vedere e niente questo è molto semplice questa è la parte che ci interessa spero si sia capito ho fatto un test tornate sulla documentazione sempre sotto in descrizione vedete un po e fate due prove per capirlo ma abbastanza è abbastanza semplice guardiamo invece velocemente a sync await
nei metodi delle classi non cambia niente semplice abbiamo il nostro metodo nella classe quindi classe persona cioè il costruttore ok qua a due metodi un metodo è normale è sincrono l'altro metodo è asincrono cosa andava a fare andrà a fare una sync davanti alla funzione ovviamente davanti al metodo e ritorna va sufficiente fare una weight in questo caso è solo un esempio ok promis resolve ovviamente se facessimo un flash senza fare un patch avremmo la weight del fez che stiamo andando a fare in questo caso è il classico esempio che ho fatto all'inizio nell'episodio ritorna
a weight e cela promis che deve che deve rimandare molto semplice non cammini non cambia niente a livello di persona non cammina il costruttore non cambia niente nelle altre proprietà semplicemente è questo dunque direi che per il video di oggi è tutto noi ci vediamo al prossimo video dove cominceremo a parlare degli pii cosa sono gli pii abbiamo ancora credo quattro video al massimo e dopo di che andremo avanti con con altre cose quindi preparatevi che siamo quasi alla fine di javascript e vi ringrazio per sé rimasti con me vi ricordo che sotto in descrizione
c'è tutto ciò che serve se volete supportare il canale i vari gruppi il canale telegram vi ringrazio ancora è la prossima ciao ciao