AbortController per la pulizia
Creare un AbortController, passare il relativo signal a fetch e annullare le richieste in corso nella funzione di pulizia per evitare aggiornamenti dello stato su componenti smontati.
AbortController per la pulizia è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Perché annullare le richieste fetch?
Quando un componente viene smontato o avvia un nuovo recupero dati, la richiesta precedente potrebbe essere ancora in corso. Se termina dopo la nuova richiesta, i dati obsoleti sovrascrivono quelli aggiornati. AbortController annulla in modo pulito le richieste in corso.
Nozioni di base su AbortController
Crei un AbortController, passi il suo signal a fetch e chiami controller.abort() per annullare la richiesta. Quando viene annullato, fetch genera un AbortError.
const controller = new AbortController();
try {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
console.log('Request was cancelled');
} else {
setError((err as Error).message);
}
}
// To cancel:
controller.abort();Nel cleanup di useEffect
Crei un AbortController all'inizio dell'effetto e chiami abort() nella funzione di cleanup. In questo modo la richiesta viene annullata automaticamente quando cambiano le dipendenze o il componente viene smontato.
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setUser(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError') {
setError((err as Error).message);
}
}
}
load();
return () => controller.abort();
}, [userId]);AbortError ed errore di rete
Una richiesta annullata genera una DOMException con il nome 'AbortError'. Lo verifichi sempre in modo specifico e non lo mostri come errore visibile all'utente: è un comportamento di cleanup previsto.
Proprietà signal.aborted
Verifichi controller.signal.aborted per sapere se un signal è stato annullato. È utile per controllare la situazione prima di una chiamata a setState nel codice asincrono.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Annullamento di più richieste
Un solo AbortController può annullare più richieste fetch passando lo stesso signal a tutte.
const controller = new AbortController();
const { signal } = controller;
await Promise.all([
fetch('/api/users', { signal }),
fetch('/api/products', { signal }),
fetch('/api/settings', { signal }),
]);
controller.abort(); // cancels all threeAbortController con Axios
Axios supporta il signal di AbortController tramite l'opzione signal nella configurazione. L'interfaccia signal è la stessa di fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query gestisce automaticamente questo aspetto
Quando usa TanStack Query (React Query), l'annullamento viene gestito automaticamente. React Query crea e annulla internamente i controller. Questo è uno dei motivi per preferirlo ai pattern di recupero manuale.
Timeout con AbortController
Combini AbortController con setTimeout per implementare timeout sulle richieste.
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
try {
const data = await fetch(url, { signal: controller.signal });
// ...
} finally {
clearTimeout(timeoutId);
}AbortSignal.timeout() — scorciatoia moderna
Nei browser moderni, AbortSignal.timeout(ms) crea un signal che si annulla automaticamente dopo la durata specificata, senza richiedere un controller manuale.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});Il cleanup è fondamentale in React 18 Strict Mode
React 18 Strict Mode monta gli effetti due volte in sviluppo. Senza il cleanup con AbortController, verranno eseguiti doppi recuperi dati e potrebbero comparire avvisi relativi allo stato di un componente smontato. Il pattern di cleanup previene entrambi i problemi.
Verifica rapida
Come si impedisce a una risposta di rete obsoleta di aggiornare lo stato dopo un nuovo rendering del componente?
Riepilogo: AbortController
Crei un AbortController per ogni effetto. Passi il signal a fetch/axios. Annulli la richiesta nella funzione di cleanup. Ignori AbortError: è previsto. Usi signal.aborted prima di setState nel codice asincrono. Un controller può annullare molte richieste. Usi AbortSignal.timeout() per i timeout. React Query gestisce automaticamente tutto questo.
Domande Frequenti
La lezione «AbortController per la pulizia» è gratuita?
Sì — il testo completo di «AbortController per la pulizia» è 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 «AbortController per la pulizia»?
Creare un AbortController, passare il relativo signal a fetch e annullare le richieste in corso nella funzione di pulizia per evitare aggiornamenti dello stato su componenti smontati. 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 4 di 4.
Quanto tempo richiede la lezione «AbortController per la pulizia»?
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
- Basi di useEffect: dipendenze e pulizia
- Recuperare dati al montaggio
- Gestire gli stati di caricamento e di errore
- AbortController per la pulizia