Callback e callback hell
Comprendere l’asincronia basata sulle callback, riconoscere il problema dell’annidamento noto come callback hell e capire perché sono state introdotte le Promise per risolverlo.
Callback e callback hell è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 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 cosa sono i callback?
Un callback è una funzione passata come argomento a un'altra funzione, che verrà chiamata in seguito, quando una determinata attività sarà completata. I callback sono il modello asincrono originale di JavaScript e precedono le Promise.
// Synchronous callback:
[1, 2, 3].forEach(function(n) {
console.log(n);
});
// Async callback:
setTimeout(function() {
console.log('1 second later');
}, 1000);I callback error-first di Node.js
Node.js ha standardizzato una convenzione: i callback ricevono un errore come primo argomento e il risultato come secondo. Se err è null o undefined, l'operazione è riuscita.
fs.readFile('data.json', 'utf8', function(err, data) {
if (err) {
console.error('Failed to read file:', err);
return;
}
console.log('File contents:', data);
});Passaggi asincroni con i callback
Quando un'operazione asincrona dipende dal risultato di un'altra, si annidano i callback. Già tre passaggi sequenziali iniziano ad apparire poco gestibili.
getUser(userId, function(err, user) {
if (err) return handleError(err);
getOrders(user.id, function(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, function(err, invoice) {
if (err) return handleError(err);
// Finally use invoice
renderInvoice(invoice);
});
});
});Callback hell — la piramide del caos
Un annidamento profondo viene chiamato callback hell o piramide del caos. I problemi sono numerosi: il codice si sposta verso destra a ogni livello, la gestione degli errori è ripetitiva, il flusso è difficile da seguire e il refactoring è complicato.
I problemi del callback hell
1) La gestione degli errori richiede un controllo esplicito con if(err) a ogni livello. 2) Il debug è difficile: gli stack trace non mostrano la catena logica. 3) Il codice è difficile da leggere, disposto su livelli orizzontali. 4) È facile ignorare accidentalmente alcuni errori.
Come attenuarlo: funzioni denominate
Estragga i callback annidati in funzioni denominate di livello superiore. In questo modo l'annidamento si appiattisce e ogni passaggio può essere testato in modo indipendente, ma il problema fondamentale del coordinamento non viene risolto.
function onInvoice(err, invoice) {
if (err) return handleError(err);
renderInvoice(invoice);
}
function onOrders(err, orders) {
if (err) return handleError(err);
getInvoice(orders[0].id, onInvoice);
}
function onUser(err, user) {
if (err) return handleError(err);
getOrders(user.id, onOrders);
}
getUser(userId, onUser);Librerie per il controllo del flusso (storico)
Librerie come async.js fornivano funzioni di supporto (async.waterfall, async.parallel) per gestire i flussi basati sui callback. Erano lo stato dell'arte prima dell'arrivo delle Promise in ES2015.
Perché i callback non scompariranno
I callback sono ancora presenti ovunque: i listener degli eventi, i metodi degli array, setTimeout e le API degli stream utilizzano tutti i callback. Il punto fondamentale è che, per la sequenza asincrona, le Promise e async/await sono solitamente superiori. I callback per semplici eventi che si verificano una sola volta restano una scelta appropriata.
Da callback a Promise: promisificazione
util.promisify() di Node.js avvolge le funzioni basate su callback error-first e le trasforma in versioni che restituiscono Promise. In questo modo collega le API legacy al moderno codice async/await.
const { promisify } = require('util');
const readFile = promisify(require('fs').readFile);
async function readConfig() {
const data = await readFile('config.json', 'utf8');
return JSON.parse(data);
}Quando i callback sono ancora lo strumento giusto
I listener degli eventi (addEventListener) si aspettano callback, ed è corretto: vengono eseguiti più volte. Anche i gestori dei dati degli stream si aspettano callback. Le Promise rappresentano risultati asincroni che si verificano una sola volta; i callback sono sottoscrizioni a eventi multipli.
La direzione futura: Promise e async/await
Le Promise, introdotte in ES2015, e async/await, introdotto in ES2017, hanno risolto il callback hell. Il moderno codice JavaScript utilizza quasi sempre async/await per le operazioni asincrone sequenziali. Comprendere i callback resta importante per leggere il codice meno recente e il funzionamento interno delle librerie.
Verifica rapida
Qual è il problema principale descritto dall'espressione callback hell?
Riepilogo: i callback
I callback sono funzioni passate ad altre funzioni per essere chiamate in seguito. Sono il modello asincrono originale. I callback error-first (err, result) sono una convenzione di Node.js. Un annidamento profondo crea il callback hell. Estragga funzioni denominate per appiattire la struttura. Utilizzi Promise e async/await per i flussi asincroni sequenziali. I callback restano appropriati per i listener degli eventi e gli stream.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Callback e callback hell» è gratuita?
Sì — il testo completo di «Callback e callback hell» è 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 «Callback e callback hell»?
Comprendere l’asincronia basata sulle callback, riconoscere il problema dell’annidamento noto come callback hell e capire perché sono state introdotte le Promise per risolverlo. 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 2 di 4.
Quanto tempo richiede la lezione «Callback e callback hell»?
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
- Event loop: call stack, coda e microtask
- Callback e callback hell
- Promise: then, catch, finally e Promise.all
- async/await e gestione degli errori