 |
Se ti sei sempre sentito confuso leggendo articoli sulle Promise, questo è quello giusto. Ti spiegherò cosa sono, a cosa servono e come usarle, senza giri di parole. E soprattutto, capirai la relazione tra Promise, async e await.
✅ 1. Cos’è una Promise
Una Promise è un oggetto JavaScript che rappresenta un’operazione asincrona che potrebbe completarsi in futuro.
In parole semplici: è una promessa che il codice ti fa, dicendoti:
“Non ho ancora finito, ma ti prometto che prima o poi ti dirò il risultato (o l’errore).”
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("All ready!");
}, 1000);
});
myPromise.then(result => {
console.log(result); // After 1 second: "All ready!"
});
❓ Perché serve una Promise?
Prima delle Promise, si usavano le callback:
function doSomething(callback) {
setTimeout(() => {
callback("Done!");
}, 1000);
}
doSomething(result => {
console.log(result); // "Done!"
});
Il problema? Quando hai tante operazioni asincrone una dentro l’altra, finisci nel famoso “callback hell” (ossia il codice diventa sempre più annidato fino a perderne il controllo, per non parlare poi della manutenzione...impossibile! 👿):
login(user => {
getData(user.id, data => {
render(data, () => {
console.log("All ready!");
});
});
});
🔄 Come si usa una Promise
Quando chiami una funzione che restituisce una Promise, puoi usare:
.then()per gestire il successo.catch()per gestire l’errore
faiLogin()
.then(user => loadData(user.id))
.then(data => showPage(data))
.catch(errore => console.error("Something went wrong", errore));
⚡️ Async e Await: la versione "umana" delle Promise
Cos’è async/await? E che c’entra con le Promise?
async/await è solo un modo più semplice di scrivere codice che usa le Promise.
Esempio:
async function mostraTutto() {
try {
const user = await faiLogin();
const dati = await caricaDati(user.id);
mostraPagina(dati);
} catch (errore) {
console.error("Errore:", errore);
}
}
È esattamente lo stesso codice di prima, ma scritto in modo più leggibile, come se fosse sincrono.
🧠 Ricapitolando:
| Concetto | Cosa fa |
|---|---|
| Callback | Una funzione che chiami quando hai finito un lavoro asincrono |
| Promise | Un oggetto che rappresenta qualcosa che potrebbe completarsi in futuro |
| then / catch | Metodi per “reagire” al completamento della Promise |
| async / await | Sintassi moderna per scrivere codice asincrono in modo più leggibile |
🎯 Esempio completo: da Callback a Async/Await
Con callback:
getUser((user) => {
getPosts(user.id, (posts) => {
console.log(posts);
});
});
Con Promise:
getUser()
.then(user => getPosts(user.id))
.then(posts => console.log(posts))
.catch(err => console.error(err));
Con async/await:
async function mostraPost() {
try {
const user = await getUser();
const posts = await getPosts(user.id);
console.log(posts);
} catch (err) {
console.error(err);
}
}
🌐 Esempio pratico con fetch e API
Supponiamo di voler recuperare dati da un’API pubblica, ad esempio: https://jsonplaceholder.typicode.com/posts
Con Promise:
fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(dati => {
console.log("Post ricevuti:", dati);
})
.catch(errore => {
console.error("Errore nella fetch:", errore);
});
Con async/await:
async function caricaPost() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const dati = await response.json();
console.log("Post ricevuti:", dati);
} catch (errore) {
console.error("Errore nella fetch:", errore);
}
}
Con questo esempio, chiunque può provare subito nel browser, copiando il codice nella console degli strumenti di sviluppo (F12).
📌 Conclusione
- Le Promise sono fondamentali per lavorare con codice asincrono.
async/awaitnon è una "cosa diversa", ma un modo più semplice di usare le Promise.- Se capisci Promise, capisci anche async/await (e viceversa).
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
