Spiegazione di JavaScript Promises e Async/Await
Immagina di ordinare una pizza online.
Non rimani fermo alla porta senza fare nulla in attesa che arrivi. Guardi video, lavori o parli con gli amici. Quando la pizza arriva, la mangi.
JavaScript funziona allo stesso modo.
Compiti come le richieste API o le chiamate al database richiedono tempo. Se JavaScript aspettasse ogni singolo compito, la tua app si bloccherebbe. Invece, continua a eseguire altro codice mentre è in attesa.
Una Promise rappresenta un valore che arriverà in futuro.
Una Promise ha tre stati:
- Pending
- Fulfilled (Successo)
- Rejected (Fallimento)
Raramente vedrai il codice utilizzato per creare una nuova Promise. Questo perché gli strumenti moderni come fetch() restituiscono già una Promise per te.
Cosa fa .then()?
Molte persone pensano che .then() recuperi i dati. Non è così.
.then() registra una funzione di callback. Dici a JavaScript: "Quando questa Promise termina, esegui questa funzione".
È come un'app di delivery. Ordini del cibo e l'app dice: "Chiamami quando il cibo arriva". La funzione attende il risultato.
Perché usare Async/Await?
Puoi concatenare chiamate .then() per ottenere i dati dell'utente, poi i post, poi i commenti. Funziona, ma le catene lunghe sono difficili da leggere.
Async/await rende il codice simile a un normale codice sequenziale. È più pulito e facile da seguire.
await blocca JavaScript?
Questa è una domanda comune durante i colloqui. La risposta è no.
Quando JavaScript incontra la parola chiave await, mette in pausa solo quella specifica funzione async. Il resto della tua applicazione continua a girare.
Flusso di esempio:
- Esegui il codice nella funzione async.
- Incontra await e mette in pausa quella funzione.
- Esegui il resto dell'applicazione.
- Quando il compito termina, riprendi la funzione async.
Async/await è solo un modo più pulito per scrivere Promise. È uno zucchero sintattico.
Punti chiave:
- Promise = Un valore futuro.
- fetch() = Restituisce una Promise.
- .then() = Esegui questo quando è pronto.
- await = Mette in pausa questa funzione, non l'intero programma.
- async/await = Sintassi delle Promise più pulita.
Fonte: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm