Timeout e annullamento con AbortController
Aggiungi timeout al codice asincrono e annulli le operazioni con AbortController; colleghi i segnali alle attività per interromperle in anticipo.
Timeout e annullamento con AbortController è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.
Perché utilizzare timeout e abort?
Obiettivo: Arrestare in modo sicuro le attività lunghe.
- Aggiungere un timeout semplice
- Utilizzare AbortController
- Collegare signal all'attività
- Pulire i timer
Attività che gestisce signal
Crei attività che ascoltino signal.abort e arrestino il timer quando vengono annullate.
// Fake fetch that respects AbortSignal
function fakeFetch(ms, value, signal) {
return new Promise(function (resolve, reject) {
// Abort handler
function onAbort() {
clearTimeout(t);
reject(new Error("aborted"));
}
// If already aborted
if (signal && signal.aborted) {
return reject(new Error("aborted"));
}
// Finish timer
const t = setTimeout(function () {
if (signal) {
signal.removeEventListener("abort", onAbort);
}
resolve(value);
}, ms);
// Listen for abort
if (signal) {
signal.addEventListener("abort", onAbort);
}
});
}
fakeFetch(5, "OK").then(function (v) {
console.log("fakeFetch:", v);
});
Abort in pratica
Crei un controller, passi il suo signal e chiami abort() per annullare l'attività.
// AbortController cancels signal-aware tasks
const controller = new AbortController();
fakeFetch(20, "Too slow", controller.signal)
.then(function (v) {
console.log("done:", v);
})
.catch(function (e) {
console.log("catch:", e.message);
});
// Abort after a short delay
setTimeout(function () {
controller.abort();
console.log("aborted");
}, 5);
Wrapper per il timeout
Utilizzi Promise.race per rifiutare la Promise se l'attività richiede troppo tempo; elimini il timer in finally.
// Add a timeout to any Promise with Promise.race
function withTimeout(promise, ms) {
return Promise.race([
promise,
new Promise(function (_resolve, reject) {
const t = setTimeout(function () {
reject(new Error("timeout"));
}, ms);
// Small trick: clear timer when the main promise settles
promise.finally(function () { clearTimeout(t); });
})
]);
}
// Demo: this will time out
withTimeout(fakeFetch(30, "late"), 10)
.then(function (v) { console.log("value:", v); })
.catch(function (e) { console.log("timeout:", e.message); });
Timeout e abort insieme
Se vince il timeout, chiami abort() per interrompere subito l'attività sottostante.
// Combine: abort if timeout fires
async function fetchWithTimeout(msWork, msTimeout) {
const c = new AbortController();
const task = fakeFetch(msWork, "data", c.signal);
// If timeout wins, abort the task
try {
const result = await withTimeout(task, msTimeout);
return result;
} catch (e) {
c.abort();
throw e;
}
}
fetchWithTimeout(25, 10)
.then(function (v) { console.log("got:", v); })
.catch(function (e) { console.log("failed:", e.message); });
Suggerimenti e checklist
Suggerimenti:
- Cancell sempre i timer in finally.
- Passi signal alle attività e controlli signal.aborted.
- Preferisca un controller per ogni richiesta.
Quiz sulle basi di AbortController
Verifica rapida: pattern di annullamento.
Riepilogo
Riepilogo: ha realizzato un task che gestisce il segnale, lo ha annullato con AbortController, ha aggiunto un timeout tramite Promise.race e ha combinato i due approcci per ottenere uscite anticipate sicure.
Domande Frequenti
La lezione «Timeout e annullamento con AbortController» è gratuita?
Sì — il testo completo di «Timeout e annullamento con AbortController» è 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 JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.
Cosa imparerò in «Timeout e annullamento con AbortController»?
Aggiungi timeout al codice asincrono e annulli le operazioni con AbortController; colleghi i segnali alle attività per interromperle in anticipo. Eserciti JavaScript 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 JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript 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 3.
Quanto tempo richiede la lezione «Timeout e annullamento con AbortController»?
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 JavaScript Academy?
Sì. Ogni lezione JavaScript 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
- Scrivere funzioni async; try/catch; parallelo e sequenziale
- Timeout e annullamento con AbortController
- Schemi di ritentativo e backoff