Async/await in JavaScript

In questo articolo, spiegheremo async/await in JavaScript.

YouTube Video

Async/await in JavaScript

async (e await) in JavaScript sono funzionalità progettate per rendere la scrittura delle operazioni asincrone più intuitiva e leggibile. Utilizzando questo, puoi ridurre la complessità delle tradizionali funzioni di callback e delle catene di Promise, e scrivere codice asincrono in modo che sembri codice sincrono.

Funzione async

async viene utilizzato per definire una funzione come funzione asincrona. Una funzione async restituisce sempre una Promise. All'interno di una funzione contrassegnata con async, puoi usare await per aspettare il ritorno del risultato di una Promise.

Sintassi di base di una funzione async

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

In questo caso, chiamare myAsyncFunction() restituisce automaticamente un oggetto Promise. Quando la Promise viene risolta, il suo risultato diventa il valore restituito da return.

Esempio: Funzione di base async

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await viene utilizzato per attendere che una Promise venga risolta. Usando await, puoi sospendere l'esecuzione fino a che la Promise non viene risolta e ricevere il risultato della Promise. await può essere utilizzato solo all'interno di una funzione async.

Esempio: Come utilizzare await

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Nell'esempio sopra, attende la Promise restituita dalla funzione fetch con await, per poi eseguire ulteriori operazioni asincrone utilizzando il risultato.

Gestione degli errori con async/await

Se si verifica un errore all'interno di una funzione async, quell'errore viene trattato come un reject della Promise. Puoi utilizzare le istruzioni try...catch per gestire gli errori.

Esempio: Gestione degli errori

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

Utilizzando un blocco try...catch puoi catturare gli errori che si verificano durante le operazioni asincrone, evitando che il programma si arresti in caso di errori.

Vantaggi di async/await

Rispetto alle tradizionali catene di Promise, async/await offre i seguenti vantaggi:.

• Maggiore leggibilità
  • L’elaborazione asincrona può essere scritta come codice sincrono, evitando la complessità delle catene di Promise e delle callback profondamente annidate.
• Debug più semplice
  • Poiché assomiglia al codice sincrono, il debug e la gestione degli errori diventano più semplici.
• Migliore manutenibilità
  • I processi asincroni possono essere scritti in modo più semplice, rendendo più facile modificare o cambiare il codice e migliorando la manutenibilità a lungo termine.

Esempio: catena di Promise vs async/await

Confrontiamo il codice che utilizza catene di Promise con quello che utilizza async/await.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Come puoi vedere, usare async/await permette di scrivere processi asincroni in modo lineare, producendo un codice più leggibile.

Eseguire simultaneamente più operazioni asincrone

Combinando Promise.all() o Promise.race() con await, puoi eseguire simultaneamente più operazioni asincrone e gestire collettivamente i loro risultati.

Esempio: Esegui più operazioni asincrone contemporaneamente

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() risolve più Promises simultaneamente e restituisce i loro risultati come array. Attende che tutte le Promises vengano risolte e, se una fallisce, l'intero processo è considerato un fallimento.

Riepilogo

• Funzione async: Restituisce sempre una Promise ed è usata per scrivere la gestione asincrona.
• await: Utilizzato per attendere che una Promise venga risolta e per ricevere il suo risultato.
• Gestione degli errori: Utilizza try...catch per gestire gli errori che accadono durante la gestione asincrona.
• Operazioni asincrone multiple: Puoi eseguire più operazioni asincrone simultaneamente utilizzando Promise.all().

async/await sono strumenti potenti per gestire la gestione asincrona, quindi assicurati di utilizzarli per semplificare logiche asincrone complesse.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video