‫-: Parliamo ora dei
‫problemi che possono sorgere quando usiamo troppe funzioni di call back.
‫E per
‫farlo, faremo un piccolo esempio
‫per illustrare questo effetto.
‫Ora ricorda che se hai già familiarità con Promises
‫e Async/Await e, in generale, Java
‫Script asincrono, non esitare
‫a saltare questa sezione e contrassegnare tutti
‫i video come completati in modo da
‫poter ancora ottenere il 100% di completamento
‫del corso.
‫Ma se vuoi
‫imparare tutto su Java Script
‫asincrono e come usarlo in OJS, allora andiamo avanti.
‫Quindi vai
‫avanti e prendi i file di avvio per questo progetto
‫dai file del corso.
‫Ce l'ho già qui sul mio
‫desktop, quindi questa cartella qui.
‫E c'è solo questo file lì
‫dentro, quindi è tutto ciò di cui abbiamo bisogno per iniziare.
‫E ce l'ho qui in VS Code già aperto e
‫quello che faremo per
‫iniziare è semplicemente creare un NX. file JS.
‫Proprio come prima.
‫Ora quello che faremo è questo,
‫useremo questo, questo file
‫di cane qui, questo file di testo.
‫E da qui leggeremo la razza del cane.
‫E poi faremo una richiesta HTTP
‫per ottenere un'immagine casuale di un cane con questa razza.
‫E poi salva quell'immagine casuale in un
‫altro file di testo.
‫Quindi è un processo in tre
‫fasi e tutto ciò comporterà funzioni di richiamata.
‫E alla fine vedremo il problema che abbiamo
‫quando usiamo tutte queste funzioni di
‫richiamata l'una dentro l'altra.
‫Va bene?
‫Quindi per questo useremo
‫un'API piuttosto popolare.
‫Che è più simile a un'API divertente.
‫Ma per questo genere
‫di cose è una buona idea usarlo.
‫Quindi è il CANE. CEO, API.
‫Quindi basta premere Dog API qui.
‫Poi
‫qui, la documentazione.
‫E quello che vogliamo è prendere un cane a caso,
‫o una certa razza.
‫Quindi clicca per razza qui.
‫E
‫quaggiù, quaggiù c'è l'endpoint API che raggiungeremo.
‫Quindi è questo URL qui.
‫Quindi, quando fai clic su recupera
‫qui, ogni volta che ottieni una nuova immagine, ok?
‫E quindi
‫in questa sezione faremo effettivamente una richiesta
‫HTTP proprio come abbiamo appreso
‫prima nella sezione precedente.
‫Va bene.
‫Quindi tutto ciò
‫che dovremo fare è creare una richiesta HTTP a questo
‫URL e poi ci restituirà un'immagine.
‫Va bene?
‫Ma per ora, iniziamo con una parte in
‫cui leggiamo il file e otteniamo il contenuto di
‫quel file.
‫Quindi nel nostro indice. js, di nuovo abbiamo bisogno del pacchetto
‫o modulo del file system.
‫Quindi FS
‫e richiedi il modulo FS qui.
‫E proprio come prima di fare fs. readfile e
‫facciamo la versione asincrona.
‫Va bene.
‫Ricorda che qui passiamo la posizione del file e quindi una
‫funzione di call back
‫che verrà chiamata non appena avremo finito di leggere il file.
‫Quindi abbiamo la nostra stringa modello qui.
‫E poi usiamo un dirname proprio come facevamo prima.
‫Quindi il nome della directory corrente.
‫/cane. testo.
‫Va bene e poi la nostra funzione
‫di richiamata il cui primo argomento come sempre è errore.
‫E poi i dati che sono effettivamente nel file.
‫E solo per essere
‫sicuri, accediamo ovviamente alla console.
‫Quindi un'altra stringa
‫di modello in modo da poter stampare bene i nostri dati qui.
‫Va bene.
‫Avvia il terminale qui
‫e accendilo un
‫po'.
‫E quindi sto usando nodemon proprio come ho fatto prima
‫e quindi index. js.
‫Ok, quindi la razza è retriever.
‫Ed è esattamente quello che abbiamo qui in questo file.
‫Ok, il retriever è la razza che cercheremo.
‫Ora all'interno di questa
‫funzione di richiamata, vogliamo fare quella richiesta HTTP
‫di cui abbiamo appena parlato prima.
‫E in realtà ci sono modi
‫per farlo con
‫moduli JS non nativi.
‫Ma è più semplice usare solo un pacchetto NPM per questo.
‫E ce ne sono
‫ancora molti, ma quello che useremo si chiama Super Agent.
‫Più tardi ne useremo un
‫altro, ma per ora Super Agent va bene per quello, ok.
‫E per scaricare effettivamente questo modulo usando NPM, inizieremo
‫creando il nostro file Jason del pacchetto.
‫Ricordati che?
‫Quindi lasciami finire questo e
‫inserirci NPM.
‫E premi invio su tutti questi.
‫Questo non ha molta importanza.
‫Va bene.
‫Vogliamo solo questo pacchetto. jason in
‫modo che contenga effettivamente il nome del pacchetto
‫che stiamo usando.
‫Quindi lo facciamo sempre ogni volta che iniziamo un nuovo progetto.
‫E ora l'installazione di NPM,
‫oppure possiamo semplicemente usare la I, che è la stessa, e poi
‫il nome del pacchetto.
‫Quindi niente di nuovo lì, giusto?
‫Ora per utilizzare
‫questo pacchetto, creiamo una
‫nuova variabile che conterrà quindi la funzione Super
‫Agent che questo modulo ci espone.
‫Ora andiamo avanti e usiamo effettivamente quella funzione
‫Super Agent.
‫Quindi, per fare una richiesta get,
‫usavamo semplicemente ottenere il metodo su di essa.
‫Quindi prendi e poi abbiamo bisogno di quell'URL.
‫Ok, quindi questo che ti ho mostrato prima.
‫Quindi copialo
‫e incollalo qui
‫in una stringa modello.
‫Perché ora sostituiremo effettivamente questa
‫razza qui.
‫Ok, quindi non lo
‫vogliamo, ma invece lo vogliamo
‫usare, quello che otteniamo dal nostro file.
‫Quindi in questo caso sono i dati.
‫Destra?
‫E così,
‫in questo modo, possiamo effettivamente eseguire una richiesta di ricezione HTTP.
‫Ora per ottenere i dati,
‫in realtà dovremo anche usare il metodo end su questo.
‫Ed è qui che passeremo la
‫funzione di richiamata.
‫Quindi di nuovo è un errore
‫prima richiamare e
‫poi passare anche il risultato.
‫E quindi in questa
‫funzione, prima
‫di tutto registriamo il risultato sulla console.
‫Quindi i dati che otteniamo sono nella variabile di risposta.
‫Quindi questo qui.
‫E poi su quello c'è il corpo.
‫Quindi è lì che si trova la risposta effettiva.
‫Ok, ora andiamo avanti e proviamolo.
‫E ora con questo salvataggio qui si è effettivamente spostato verso il basso.
‫Quindi, di nuovo,
‫è a causa dell'estensione precedente che abbiamo impostato in precedenza.
‫E forse hai anche
‫notato come ha sostituito le virgolette normali che avevo qui con
‫queste doppie virgolette
‫e ha anche inserito il punto e virgola qui sopra.
‫E in realtà nell'ultima sezione,
‫o in una delle
‫ultime sezioni, lo impostiamo in modo da
‫avere sempre le virgolette singole a posto.
‫Quindi, per mantenere il nostro codice coerente
‫qui, andiamo avanti
‫e creiamo molto rapidamente il file di configurazione più carino.
‫Quindi ricorda che è carino.
‫Poi lì dentro abbiamo una citazione singola.
‫Impostalo su vero.
‫E ricorda anche la larghezza di stampa.
‫E impostalo su 80.
‫Ok, salva.
‫Salva questo di nuovo.
‫E così vedete che ora sono tornate le nostre virgolette singole.
‫Quindi sembra molto più bello secondo me.
‫Anche in questo caso, se non ti piace
‫in questo modo, puoi ovviamente utilizzare le tue impostazioni.
‫Va bene.
‫Ad ogni
‫modo, questo pezzo di codice
‫qui dovrebbe già fare la richiesta HTTP.
‫Quindi
‫proviamolo in realtà.
‫E
‫infatti, abbiamo effettivamente questa immagine qui.
‫Quindi in realtà
‫ciò che vogliamo è all'interno di
‫questo amico nella proprietà del messaggio.
‫Quindi punto
‫messaggio.
‫Quindi proprio così.
‫E così qui abbiamo la nostra immagine del documentalista.
‫Andiamo avanti e cambiamo davvero la razza qui.
‫E non sono molto bravo con i cani.
‫Usiamo questa razza qui che conosco,
‫Labrador.
‫Non so nemmeno come dirlo.
‫Ma penso
‫che sia così, esiste.
‫Diamo un salvataggio qui di nuovo.
‫E così ora abbiamo un'altra immagine.
‫Possiamo effettivamente fare clic qui e
‫si aprirà quell'immagine per noi.
‫Va bene.
‫Quindi, per fare questa richiesta HTTP qui, avevamo bisogno
‫dei dati che avevamo prima.
‫Quindi questo pezzo di dati.
‫E quindi dovevamo fare questa richiesta qui all'interno
‫di questa funzione di richiamata della funzione
‫di lettura del file, giusto?
‫E quindi hai già una funzione di richiamata qui.
‫Quindi questo all'interno di una richiamata.
‫Ma ora ne aggiungeremo effettivamente un altro.
‫Perché ora vogliamo salvare questa stringa qui in
‫un nuovo file di testo.
‫E quindi lo faremo qui.
‫E poi questo avrà ancora un'altra
‫funzione di richiamata.
‫Ok, ha senso?
‫Quindi fs
‫writefile
‫e poi il nome del file.
‫Chiamiamo quell'immagine di un cane. testo.
‫Quindi i dati che vogliamo salvare in quel file
‫che è rest. corpo. Messaggio.
‫E poi la funzione di richiamata.
‫E questo ovviamente non avrà alcun dato,
‫ma abbiamo di nuovo l'errore.
‫Registriamo qualcosa sulla console come
‫un'immagine di cane casuale
‫salvata su file.
‫Dagli un salvataggio, verrà quindi
‫eseguito nuovamente ed ecco il nostro file immagine.
‫E in realtà puoi vedere che
‫il codice VS mostra quell'immagine qui per noi.
‫Dagli un altro salvataggio qui,
‫quindi eseguirà nuovamente il nostro
‫codice e ora abbiamo, anzi
‫abbiamo un'immagine diversa.
‫Va bene.
‫Quindi il nostro codice funziona davvero.
‫Aggiungiamo solo un piccolo handle di errore
‫qui nel caso qualcosa vada storto.
‫Ad esempio, supponiamo di aggiungere un nome strano qui.
‫Esegui di nuovo.
‫E quindi in questo momento non sarà in grado di trovare
‫un'immagine per quello.
‫E questo in realtà si tradurrà in un errore qui.
‫Quindi, dovremmo sempre
‫fare questo tipo di gestione degli errori all'inizio
‫e dire
‫così se c'è stato un
‫errore, e possiamo semplicemente registrare l'errore. Messaggio.
‫E in effetti dovremmo anche dire
‫che vogliamo tornare subito da questa funzione se c'è un errore.
‫Quindi tornerà e registrerà sulla
‫console, questo errore.
‫E nient'altro accadrà allora.
‫Va bene.
‫Quindi dice di nuovo, non trovato qui.
‫E non ha salvato nulla
‫sul file perché siamo già tornati dalla funzione qui sopra.
‫Va bene?
‫E lo stesso in realtà qui nel
‫caso in cui si verifica un errore durante il salvataggio del file su disco.
‫Torniamo qui, facciamo un altro
‫salvataggio.
‫E così ora funziona di nuovo bene.
‫Va bene.
‫Quindi questo è
‫solo un
‫piccolo esempio per mostrarti quanto sia facile finire
‫con le richiamate all'interno delle richiamate all'interno delle richiamate.
‫E questo ovviamente perché, sappiamo
‫già che in Note
‫JS, dovremmo sempre usare codice asincrono, giusto?
‫Abbiamo finito per utilizzare le richiamate all'interno
‫delle richiamate all'interno delle richiamate.
‫E a volte può
‫andare ancora più in profondità, ovviamente, di quello che abbiamo qui.
‫Ovviamente potresti
‫avere come 10 livelli uno dentro l'altro.
‫Ora tutte queste richiamate rendono
‫il nostro codice un po' disordinato.
‫Lo rende difficile da capire e anche, in
‫generale, difficile da mantenere.
‫Anche in questo caso forse non a questo livello con solo
‫tre richiamate l'una dentro l'altra.
‫Ma se lo avessimo annidato ancora più in
‫profondità, potrebbe diventare rapidamente
‫un incubo mantenere un codice come questo.
‫Ed è per questo che questo
‫schema è stato chiamato call back hell.
‫È facile
‫identificare questa forma triangolare nel nostro codice.
‫È quello che abbiamo qui.
‫Come questa sorta di forma triangolare.
‫Ogni volta che vedi questo, è un
‫segno che
‫sei praticamente all'inferno.
‫Va bene?
‫E forse
‫vedrai o ascolterai questo termine quando farai qualche ricerca
‫su Note JS o qualcosa del genere.
‫Ma in questo momento, questo è in
‫realtà l'unico modo che conosciamo per scrivere codice asincrono
‫a questo punto.
‫Ma lo salveremo per il resto di
‫questa piccola sezione.
‫Quindi impareremo come usare
‫qualcosa chiamato Promesse.
‫E questo alla fine risolverà il
‫nostro problema e
‫renderà il nostro codice più facile da leggere e da mantenere.
‫Quindi andiamo a farlo nel resto della sezione.