Utilizzo di Async/Await per un Codice Asincrono più Pulito
La sintassi async/await rappresenta un approccio moderno e più leggibile per lavorare con le promise in JavaScript. Consente agli sviluppatori di scrivere codice asincrono che appare e si comporta come codice sincrono. Invece di concatenare le chiamate then(), è possibile utilizzare await per sospendere l'esecuzione di una funzione async fino a quando una promise non viene risolta.
Come funzionano le funzioni async
Una funzione async è una funzione dichiarata con la parola chiave async. Restituisce un Promise per impostazione predefinita, e all'interno di essa è possibile utilizzare la parola chiave await per sospendere l'esecuzione fino a quando la promise non viene risolta.
index.html
index.js
La funzione fetchData è dichiarata come async, consentendole di utilizzare await per sospendere l'esecuzione fino alla risoluzione di una promessa. In questo esempio, un ritardo simulato di 2 secondi imita un'operazione di recupero dati. Una volta risolta, il risultato ("Data fetched successfully!") viene visualizzato nel paragrafo HTML.
Semplificazione delle catene di Promesse con Async/Await
Quando si lavora con più operazioni asincrone in sequenza, l'utilizzo di async/await può semplificare il codice che altrimenti richiederebbe il concatenamento di promesse tramite then().
Vediamo come una serie di promesse (come il recupero e l'elaborazione dei dati) possa essere gestita in modo più chiaro con async/await.
index.html
index.js
La funzione processData richiama tre funzioni asincrone—fetchData, processFetchedData e displayProcessedData—una dopo l'altra, attendendo (await) che l'operazione precedente sia completata prima di passare alla successiva. Questo flusso strutturato elimina la necessità di concatenare le promesse, migliorando la leggibilità. L'output finale ("Raw Data processed and displayed on the page") viene quindi mostrato nell'HTML.
Gestione degli errori con try...catch in Async/Await
Gestire gli errori nelle catene di promesse con .catch() può diventare complesso, soprattutto quando si lavora con più operazioni asincrone. Con async/await, è possibile gestire gli errori utilizzando il tradizionale blocco try...catch, rendendo la gestione degli errori più intuitiva e leggibile.
index.html
index.js
In fetchDataWithError, il blocco try esegue l'operazione await e, se ha successo, il risultato viene visualizzato nell'HTML. Se si verifica un errore (come simulato da simulateError), il blocco catch lo gestisce impostando il testo del paragrafo sul messaggio di errore ("Error: Something went wrong!").
1. Cosa fa la parola chiave async quando viene aggiunta a una funzione?
2. Qual è lo scopo della parola chiave await?
3. Quale dei seguenti è un vantaggio dell'utilizzo di async/await rispetto alla concatenazione di .then()?
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.22Utilizzo di Async/Await per un Codice Asincrono più Pulito
Scorri per mostrare il menu
La sintassi async/await rappresenta un approccio moderno e più leggibile per lavorare con le promise in JavaScript. Consente agli sviluppatori di scrivere codice asincrono che appare e si comporta come codice sincrono. Invece di concatenare le chiamate then(), è possibile utilizzare await per sospendere l'esecuzione di una funzione async fino a quando una promise non viene risolta.
Come funzionano le funzioni async
Una funzione async è una funzione dichiarata con la parola chiave async. Restituisce un Promise per impostazione predefinita, e all'interno di essa è possibile utilizzare la parola chiave await per sospendere l'esecuzione fino a quando la promise non viene risolta.
index.html
index.js
La funzione fetchData è dichiarata come async, consentendole di utilizzare await per sospendere l'esecuzione fino alla risoluzione di una promessa. In questo esempio, un ritardo simulato di 2 secondi imita un'operazione di recupero dati. Una volta risolta, il risultato ("Data fetched successfully!") viene visualizzato nel paragrafo HTML.
Semplificazione delle catene di Promesse con Async/Await
Quando si lavora con più operazioni asincrone in sequenza, l'utilizzo di async/await può semplificare il codice che altrimenti richiederebbe il concatenamento di promesse tramite then().
Vediamo come una serie di promesse (come il recupero e l'elaborazione dei dati) possa essere gestita in modo più chiaro con async/await.
index.html
index.js
La funzione processData richiama tre funzioni asincrone—fetchData, processFetchedData e displayProcessedData—una dopo l'altra, attendendo (await) che l'operazione precedente sia completata prima di passare alla successiva. Questo flusso strutturato elimina la necessità di concatenare le promesse, migliorando la leggibilità. L'output finale ("Raw Data processed and displayed on the page") viene quindi mostrato nell'HTML.
Gestione degli errori con try...catch in Async/Await
Gestire gli errori nelle catene di promesse con .catch() può diventare complesso, soprattutto quando si lavora con più operazioni asincrone. Con async/await, è possibile gestire gli errori utilizzando il tradizionale blocco try...catch, rendendo la gestione degli errori più intuitiva e leggibile.
index.html
index.js
In fetchDataWithError, il blocco try esegue l'operazione await e, se ha successo, il risultato viene visualizzato nell'HTML. Se si verifica un errore (come simulato da simulateError), il blocco catch lo gestisce impostando il testo del paragrafo sul messaggio di errore ("Error: Something went wrong!").
1. Cosa fa la parola chiave async quando viene aggiunta a una funzione?
2. Qual è lo scopo della parola chiave await?
3. Quale dei seguenti è un vantaggio dell'utilizzo di async/await rispetto alla concatenazione di .then()?
Grazie per i tuoi commenti!
