Interrompere le richieste con AbortController
Annulli in modo pulito le richieste in corso.
Interrompere le richieste con AbortController è una lezione JavaScript 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 JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Perché annullare una richiesta
A volte avvia una richiesta che non Le serve più: l'utente cambia pagina, inserisce una nuova ricerca oppure scade un timeout. AbortController consente di annullare un fetch in corso.
Creazione di un controller
Crei un AbortController. Espone un signal da passare a fetch e un metodo abort() per annullare la richiesta.
const controller = new AbortController();
console.log(controller.signal); // an AbortSignalPassaggio del signal
Passi il signal del controller a fetch tramite l'oggetto delle opzioni. A questo punto la richiesta può essere annullata.
fetch(url, { signal: controller.signal });Chiamata di abort
Chiami controller.abort() per annullare la richiesta. La Promise del fetch in attesa viene rifiutata con un AbortError.
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the requestGestione di AbortError
Distingua un annullamento intenzionale da un errore reale verificando err.name === "AbortError" nel blocco catch.
try {
await fetch(url, { signal: controller.signal });
} catch (err) {
if (err.name === "AbortError") console.log("Cancelled");
else throw err;
}Schema per il timeout
Combini questa tecnica con setTimeout per annullare automaticamente le richieste lente. Elimini il timer se la richiesta termina prima.
const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);Helper integrato per il timeout
Gli ambienti moderni offrono AbortSignal.timeout(ms), che restituisce un signal con annullamento automatico. È più semplice che configurare personalmente setTimeout.
fetch(url, { signal: AbortSignal.timeout(5000) });Annullamento della ricerca precedente
Per una ricerca durante la digitazione, annulli la richiesta precedente prima di avviarne una nuova. In questo modo evita che risposte obsolete sovrascrivano i risultati aggiornati.
let current = null;
function search(q) {
if (current) current.abort();
current = new AbortController();
return fetch("/search?q=" + q, { signal: current.signal });
}Un signal per molti fetch
Un singolo signal può annullare più richieste contemporaneamente. Passi lo stesso signal a diversi fetch e una sola chiamata a abort() li annullerà tutti.
const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels bothSignal già annullati
Se un signal è già annullato quando viene passato a fetch, la richiesta viene rifiutata immediatamente. Verifichi signal.aborted se deve conoscerne lo stato.
if (controller.signal.aborted) console.log("already cancelled");Pulizia alla rimozione del componente
Nelle interfacce basate su componenti, annulli le richieste ancora attive quando il componente viene distrutto, per evitare di aggiornare lo stato di qualcosa che non esiste più.
const controller = new AbortController();
// on teardown:
controller.abort();Verifica rapida
Annullamento delle richieste fetch.
Riepilogo
Crei un AbortController, passi il suo signal a fetch e chiami abort() per annullare la richiesta. La Promise viene rifiutata con un AbortError, che può riconoscere dal nome. Utilizzi questa tecnica per i timeout (AbortSignal.timeout), per annullare la ricerca precedente, per annullare più richieste e per la pulizia durante lo smontaggio.
Domande Frequenti
La lezione «Interrompere le richieste con AbortController» è gratuita?
Sì — il testo completo di «Interrompere le richieste 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 4 lezioni in totale.
Cosa imparerò in «Interrompere le richieste con AbortController»?
Annulli in modo pulito le richieste in corso. 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 4 di 4.
Quanto tempo richiede la lezione «Interrompere le richieste 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
- Effettuare richieste GET
- POST e invio dei dati
- Gestire errori e codici di stato
- Interrompere le richieste con AbortController