4.1 Parola chiave async
Le funzioni asincrone in JavaScript permettono di scrivere codice asincrono che si legge e appare come codice sincrono. Le parole chiave async e await, introdotte in ECMAScript 2017 (ES8), facilitano il lavoro con le promesse e rendono il codice più comprensibile e gestibile.
Concetti principali
La parola chiave async davanti alla dichiarazione di una funzione indica che la funzione è asincrona. Una funzione asincrona restituisce sempre una promessa, anche se non si utilizza esplicitamente l'operatore return. Se la funzione restituisce un valore, questo viene automaticamente inserito in una promessa con quel valore.
Sintassi:
async function nome() {
// codice della funzione
}
Esempio:
async function greet() {
return 'Hello, world!';
}
greet().then((message) => {
console.log(message); // Mostrerà: Hello, world!
});
4.2 Parola chiave await
La parola chiave await viene usata all'interno di una funzione asincrona per sospendere la sua esecuzione finché la promessa non è risolta. await può essere usata solo all'interno di funzioni dichiarate con la parola chiave async.
Sintassi:
let result = await
promise;
Esempio:
function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function greet() {
await delay(2000);
return 'Hello, world!';
}
async function displayGreeting() {
const message = await greet();
console.log(message); // Mostrerà: Hello, world! dopo 2 secondi
}
displayGreeting();
4.3 Esempi di utilizzo di async e await
Esempio 1: Funzione asincrona con attesa di più promesse
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const data1 = await fetchData1();
console.log(data1); // Mostrerà: Data 1 dopo 1 secondo
const data2 = await fetchData2();
console.log(data2); // Mostrerà: Data 2 dopo 2 secondi
}
fetchAllData();
Esempio 2: Esecuzione parallela di operazioni asincrone
Per eseguire più operazioni asincrone in parallelo, puoi usare Promise.all() con await.
function fetchData1() {
return new Promise((resolve) => setTimeout(() => resolve('Data 1'), 1000));
}
function fetchData2() {
return new Promise((resolve) => setTimeout(() => resolve('Data 2'), 2000));
}
async function fetchAllData() {
const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
console.log(data1); // Mostrerà: Data 1 dopo 2 secondi
console.log(data2); // Mostrerà: Data 2 dopo 2 secondi
}
fetchAllData();
Esempio 3: Gestione degli errori con try...catch
Le funzioni asincrone permettono di usare i blocchi try...catch per gestire gli errori, rendendo il codice più leggibile e gestibile.
function fetchDataWithError() {
return new Promise((resolve, reject) => setTimeout(() => reject('Error occurred'), 1000));
}
async function fetchData() {
try {
const data = await fetchDataWithError();
console.log(data);
} catch (error) {
console.error('Error:', error); // Mostrerà: Error: Error occurred dopo 1 secondo
}
}
fetchData();
Esempio 4: Uso di async e await nei metodi di classe
Le funzioni asincrone possono essere usate anche nei metodi delle classi.
class DataFetcher {
async fetchData() {
const data = await new Promise((resolve) => setTimeout(() => resolve('Fetched Data'), 1000));
return data;
}
}
const fetcher = new DataFetcher();
fetcher.fetchData().then((data) => {
console.log(data); // Mostrerà: Fetched Data dopo 1 secondo
});
Esempio 5: Iteratori asincroni
Gli iteratori asincroni permettono di lavorare con flussi di dati che arrivano in modo asincrono.
async function* asyncGenerator() {
let i = 0;
while (i < 3) {
await new Promise((resolve) => setTimeout(resolve, 1000));
yield i++;
}
}
async function iterateAsyncGenerator() {
for await (let value of asyncGenerator()) {
console.log(value); // Mostrerà 0, 1 e 2 a intervalli di 1 secondo
}
}
iterateAsyncGenerator();
GO TO FULL VERSION