0Pricing
Frontend Academy · Lezione

Promise: then, catch, finally e Promise.all

Creare e concatenare Promise, gestire gli errori nei blocchi catch, eseguire le operazioni di pulizia in finally e avviare più Promise in parallelo con Promise.all.

Promise: then, catch, finally e Promise.all è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cos'è una Promise?

Una Promise rappresenta un valore che sarà disponibile in futuro. È un oggetto che si trova in uno di tre stati: in attesa (iniziale), completata (risolta con un valore) oppure rifiutata (fallita per un determinato motivo). Una volta stabilizzato, lo stato di una Promise è permanente.

Creare una Promise

Crei una Promise con il costruttore new Promise(executor). La funzione executor riceve i callback resolve e reject. Chiami resolve con il valore del risultato positivo oppure reject con un errore.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — gestire il successo

promise.then(onFulfilled) registra un callback che viene eseguito quando la Promise viene completata. Riceve il valore risolto. .then() restituisce una nuova Promise, consentendo di concatenare più operazioni.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — gestire gli errori

promise.catch(onRejected) gestisce i rifiuti. Inserito alla fine di una catena, intercetta qualsiasi errore di uno dei passaggi precedenti.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — eseguire sempre

promise.finally(onFinally) viene eseguito indipendentemente dal fatto che la Promise sia stata completata o rifiutata. È perfetto per le operazioni di pulizia: nascondere un indicatore di caricamento, rilasciare un blocco o registrare dati di analisi.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Concatenare le Promise — restituire valori

Restituisca un valore da .then() e questo diventerà il valore risolto del .then() successivo. Restituisca una nuova Promise per concatenare in sequenza le operazioni asincrone.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — eseguire in parallelo

Promise.all([p1, p2, p3]) attende che tutte le Promise vengano risolte e restituisce un array di risultati nello stesso ordine. Se una qualsiasi Promise viene rifiutata, l'intera operazione viene rifiutata immediatamente.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — non interrompere al primo errore

Promise.allSettled() attende che tutte le Promise raggiungano uno stato finale (risolte o rifiutate) e restituisce un array di oggetti risultato con {status, value} oppure {status, reason}. È utile quando non si desidera che un singolo errore impedisca di ottenere tutti gli altri risultati.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() e Promise.any()

Promise.race() viene risolta o rifiutata con la prima Promise che raggiunge uno stato finale. Promise.any() viene risolta con la prima Promise completata (ignora i rifiuti e viene rifiutata solo se tutte le Promise vengono rifiutate). È utile per i timeout e la ridondanza.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Creare Promise già stabilizzate

Promise.resolve(value) crea una Promise già completata con value. Promise.reject(error) crea una Promise già rifiutata. È utile per i test e per le funzioni adattatrici.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Eventi di rifiuto non gestito

Se una Promise viene rifiutata senza .catch(), si verifica un rifiuto non gestito. I browser moderni e Node.js emettono avvisi. Aggiunga sempre un .catch() oppure utilizzi try/catch con async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Verifica rapida

Quale metodo statico esegue più Promise in parallelo e restituisce un array con tutti i risultati?

Riepilogo: le Promise

.then() per il successo, .catch() per gli errori e .finally() per le operazioni di pulizia. Le catene trasmettono i valori da un passaggio all'altro. Promise.all() esegue le operazioni in parallelo. Promise.allSettled() tollera gli errori parziali. Promise.race() restituisce il risultato più rapido. Gestisca sempre i rifiuti. Il codice moderno utilizza async/await come zucchero sintattico per le Promise.

Domande Frequenti

La lezione «Promise: then, catch, finally e Promise.all» è gratuita?

Sì — il testo completo di «Promise: then, catch, finally e Promise.all» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Promise: then, catch, finally e Promise.all»?

Creare e concatenare Promise, gestire gli errori nei blocchi catch, eseguire le operazioni di pulizia in finally e avviare più Promise in parallelo con Promise.all. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Promise: then, catch, finally e Promise.all»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Event loop: call stack, coda e microtask
  2. Callback e callback hell
  3. Promise: then, catch, finally e Promise.all
  4. async/await e gestione degli errori
← Torna a Frontend Academy