Async Await in JavaScript: gestione delle Promises con esempi pratici

booleanASYNC / AWAIT

semplice come se fosse sincronoAdvanced JS: Sintassi Async / Await

Callback Hell

Molte callback annidate rendono il codice difficile da leggere e mantenere.

1 prendiNome ( ( nome) => { 2 prendiEtà ( (età) =>{ 3 prendiAltezza ( (altezza) => { 4 prendiColorePreferiot ( (colorePreferito) => { 5 prendiPeso ( (peso) => { 6 prendiHobby ( ( hobby) => { 7 8 prendiProfessione ( (professione) =>{ console . log (` 9 10 11 12 13 14 15 } 16 } 17 18 19 } ) 20 $ {nome} ha $ {età} anni, è alto $ {altezza}cm. Il suo colore preferito è $ {colorePreferito} . Pesa $ {peso} chili, di lavoro fa il $ {professione} e nel tempo libero fa $ {hobby} . YO DAWG, I HEARD YOU LIKE CALLBACKS SO I PUT A CALLBACK IN YOUR CALLBACK SO YOU CAN CALLBACK WHILE YOU CALLBACKAdvanced JS: Sintassi Async / Await

Callback Hell Esempio Reale

Un esempio reale in cui può verificarsi questo problema è quando il risultato di una promise è necessario a quella successiva.

1 fetch ( 'https://esempio/utenti/hyur' ) 2 . then ( response => response . json ( ) ) 3 . then ( utente => { fetch ( `https://esempio/libri/$ {utente.idLibroPreferito} }) . then ( response => response. json ( ) ) 7 fetch ( `https ://esempio/autori/$ {libro.idAutore} }) 8 . then ( response => response. json ( ) ) . then ( autore => { 9 10 fetch(`https://esempio/luoghi/$ {autore.idLuogoDiNascita} ) 11 . then ( response => response. json ( )) 12 . then ( luogo => { 13 console. log( `L'autore del libro preferito è nato a $ {luogo. nome} ) ; 14 15 16 }) 17 }) 4 5 6 . then ( libro => {Advanced JS: Sintassi Async / Await

La sintassi Async/Await

• Async/Await è un'astrazione sopra le Promises per rendere il codice più leggibile.
• async: Marca una funzione come asincrona.
• await: Aspetta la risoluzione di una Promise.

1 async function luogoDiNascita ( ) { 2 const responseUtente = await fetch ( 'https ://esempio/utenti/hyur' ) ; 3 const utente = await responseUtente. json ( ) ; 4 const responseLibro = await fetch ( https: //esempio/ libri/$ {utente. idLibroPreferito} ') ; 5 const libro = await responseLibro. json ( ) ; 6 const responseAutore = await fetch( `https ://esempio/autori/$ {libro. idAutore} ) ; 7 const autore = await responseAutore. json ( ) ; 8 const responseLuogo = await fetch( `https://esempio/luoghi/$ {autore.idLuogoDiNascita} ) ; 9 const luogo = await responseLuogo. json ( ) ; 10 console. log( `L'autore del libro preferito è nato a $ {luogo. nome} ) ; 11 } 00 E se voglio ritornare un valore? L'espressione await promise assume il valore passato al resolve.Advanced JS: Sintassi Async / Await

Cosa ritorna una funzione async?

1 async function prendiUtente (nomeUtente) { 2 const responseUtente = await fetch( `https: //esempio/utenti/$ {nomeUtente} ) ; 3 const utente = await responseUtente. json ( ) ; 4 return utente; } 5 6 Ritorna una Promise! 7 const utente = prendiUtente ( 'hyur ' ) ; 8 console . log (utente) ; // ??? 1 async function prendiUtente (nomeUtente) { 2 const responseUtente = await fetch( `https ://esempio/utenti/$ {nomeUtente} ) ; 3 const utente = await responseUtente. json () ; 4 return utente; 5 } 6 7 async function funzioneDiSupporto () { 8 const utente = await prendiUtente ( 'hyur' ) ; console. log (utente) ; 9 10 11 12 funzioneDiSupporto () ; } Ma se non voglio creare una funzione di supporto?Advanced JS: Sintassi Async / Await

Funzione IIFE

Immediately Invoked Function Expression

Funzione asincrona anonima immediatamente invocata

1 (async ( ) => { 2 const utente = await prendiUtente ( ' hyur ' ) ; 3 console . log (utente) ; 4 } ) ( ) ; È più semplice del suo nomeLIVE CODINGERROR HANDLING tutto sotto controllo (o quasi)Advanced JS: Gestione degli Errori

Cos'è un errore?

Un errore è un evento che si verifica quando il programma non può completare un'operazione come previsto.

Esempi di errori in JavaScript:

• Accesso a proprietà su variabili undefined o null. Uncaught TypeError: Cannot read properties of null (reading 'length')
• Parsing di una stringa JSON non valida. Uncaught SyntaxError: "undefined" is not valid JSON
• Operazioni non valide su tipi di dato sbagliati. " Uncaught TypeError: "13.01". toFixed is not a functionAdvanced JS: Gestione degli Errori

Come si comporta un errore?

Il comportamento predefinito è interrompere l'esecuzione del programma.

Flusso di un errore

• Il codice incontra una situazione problematica.
• L'errore viene "lanciato" (throw).
• Se nessuno lo intercetta, il programma si ferma.

Quindi gli errori si possono intercettare?Advanced JS: Gestione degli Errori

Gestione degli Errori (Error Handling)

try/catch è la sintassi che serve a gestire gli errori in modo sicuro e intercettare l'inaspettato.

• try: Dove metti il codice "a rischio".
• catch: Dove intercetti e gestisci l'errore.

1 try { 2 / / Codice potenzialmente rischioso 3 let result = riskyOperation ( ) ; 4 console . log ( "Operazione riuscita: ", result) ; 5 catch (error ) { 6 // Codice per gestire l'errore 7 console. error ( "Si è verificato un errore:", error . message ) ; 8 } Cosa sarebbe quell'error . message? ! Il programma continua anche se un errore viene catturato.Advanced JS: Gestione degli Errori

Oggetto Error

Un oggetto speciale utilizzato per rappresentare errori. Ha due proprietà principali:

• name: Il tipo di errore (stringa).
• message: Una descrizione dell'errore (stringa).

I tipi principali di errore sono:

• TypeError: Tipo non valido.
• ReferenceError: Variabile non definita.
• SyntaxError: Errore di sintassi.

x Uncaught TypeError: Cannot read properties of null (reading 'length') x Uncaught ReferenceError: variabile is not defined x Uncaught SyntaxError: "undefined" is not valid JSONAdvanced JS: Gestione degli Errori

Errori Generici

Il comando throw interrompe l'esecuzione del programma e lancia un errore. new Error () crea un oggetto errore con:

• name: La stringa ' Error ', per distinguerlo come errore generico.
• message: La stringa che viene passata.

1 function divide (a, b) { 2 if (b === 0) { 3 throw new Error ( "Impossibile dividere per zero!" ) ; 4 } 5 return a / b; 6 } x Uncaught Error: Impossibile dividere per zero!Advanced JS: Gestione degli Errori

Errori e Promises

1 promessa 2 . then (messaggio => console. log (messaggio) ) 3 . catch (errore => console.error (errore) ) 4 . finally ( () => console. log('Operazione Completata' ) ) 1 try{ 2 const messaggio = await promessa; 3 console. log (messaggio) ; 4 } catch ( errore) { 5 console. error ( 'Errore nella promessa: ' , errore. message) ; 6 } finally{ 7 console . log ( 'Operazione completata' ) ; 8 } Pending Fulfilled Rejected Settled Quindi meglio usarli sempre try/catch?Advanced JS: Gestione degli Errori

Non avvolgere il mondo intero!

Errore comune

Usare i blocchi try/catch ovunque, "giusto per sicurezza". Risultato? Codice ingombrante e meno leggibile.

Non tutto deve essere gestito subito!

Soluzione: solo al momento del bisogno

Un blocco try/catch dovrebbe intervenire dove l'errore ha un impatto immediato. Lascia propagare gli errori, ma solo fino al punto in cui ha senso farlo! Ehm ... Un esempio?LIVE CODINGESERCIZIO