2.1 Creazione di promises
I Promises sono oggetti che rappresentano il completamento (o il fallimento) di un'operazione asincrona e il suo risultato. Sono stati introdotti in ES6 (ECMAScript 2015) e sono diventati un modo standard di lavorare con codice asincrono in JavaScript.
Concetti principali
Un promise può trovarsi in uno dei tre stati:
- Pending (in attesa): stato iniziale, non completato né rifiutato.
- Fulfilled (completato): l'operazione è stata completata con successo.
- Rejected (rifiutato): l'operazione è terminata con un errore.
Creazione di un promise
Un promise viene creato usando il costruttore Promise, che accetta una executor function (funzione esecutore). Questa funzione accetta due argomenti: resolve e reject. All'interno di questa funzione viene eseguito il codice asincrono, e in caso di successo viene chiamato resolve, mentre in caso di errore viene chiamato reject.
Sintassi:
const promise = new Promise((resolve, reject) => {
// Operazione asincrona
if (/* completamento con successo */) {
resolve(value); // Successo
} else {
reject(error); // Errore
}
});
Esempio di creazione di un promise:
const myPromise = new Promise((resolve, reject) => {
const success = true; // Condizione per il completamento con successo
if (success) {
resolve('Operation was successful');
} else {
reject('Operation failed');
}
});
2.2 Uso dei promises
Metodo then
Il metodo then viene utilizzato per gestire il completamento di un promise con successo. Accetta due funzioni: la prima per gestire il completamento con successo e la seconda per gestire gli errori. Tuttavia, di solito per gestire gli errori si usa il metodo catch.
Esempio di utilizzo di then:
myPromise.then(
(successMessage) => {
console.log(successMessage); // Stampa: Operation was successful
},
(errorMessage) => {
console.error(errorMessage); // Viene chiamato in caso di errore
}
);
Metodo catch
Il metodo catch viene usato per gestire gli errori di un promise. Accetta una funzione che viene chiamata in caso di rifiuto del promise.
Esempio di utilizzo di catch:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage); // Viene chiamato: Operation failed
});
Metodo finally
Il metodo finally viene utilizzato per eseguire codice indipendentemente dal risultato del promise (successo o errore). Non accetta argomenti ed è eseguito in ogni caso dopo il completamento o il rifiuto del promise.
Esempio di utilizzo di finally:
myPromise
.then((successMessage) => {
console.log(successMessage);
})
.catch((errorMessage) => {
console.error(errorMessage);
})
.finally(() => {
console.log('Operation completed'); // Viene chiamato in ogni caso
});
2.3 Esempi di utilizzo dei promises
Esempio 1: Operazione asincrona con un promise
Simulazione di un'operazione asincrona con un timer.
function asyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve('Async operation was successful');
} else {
reject('Async operation failed');
}
}, 2000);
});
}
asyncOperation()
.then((message) => {
console.log(message);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Async operation completed');
});
Esempio 2: Esecuzione sequenziale di promises
Simulazione di operazioni asincrone sequenziali.
function firstOperation() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('First operation completed');
resolve('First result');
}, 1000);
});
}
function secondOperation(result) {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Second operation completed');
resolve(`Second result, received: ${result}`);
}, 1000);
});
}
firstOperation()
.then((result) => {
return secondOperation(result);
})
.then((finalResult) => {
console.log(finalResult);
})
.catch((error) => {
console.error(error);
})
.finally(() => {
console.log('Both operations completed');
});
Esempio 3: Esecuzione parallela di promises con Promise.all
Simulazione di operazioni asincrone parallele.
function operationOne() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation One completed');
resolve('Result One');
}, 1000);
});
}
function operationTwo() {
return new Promise((resolve) => {
setTimeout(() => {
console.log('Operation Two completed');
resolve('Result Two');
}, 1500);
});
}
Promise.all([operationOne(), operationTwo()])
.then((results) => {
console.log('All operations completed');
console.log(results); // Stampa: ['Result One', 'Result Two']
})
.catch((error) => {
console.error('One of the operations failed', error);
});
GO TO FULL VERSION