Tidsgränser och avbrytning med AbortController
Lägg till tidsgränser i asynkron kod och avbryt arbete med AbortController; koppla signaler till uppgifter så att de stoppas tidigt.
Tidsgränser och avbrytning med AbortController är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Varför tidsgränser och avbrytningar?
Mål: Stoppa långvariga uppgifter på ett säkert sätt.
- Lägg till en enkel tidsgräns
- Använd AbortController
- Koppla signal till uppgiften
- Städa bort timers
Signalmedveten uppgift
Skapa uppgifter som listen to signal.abort och stoppa timern vid avbrytning.
// 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 i praktiken
Skapa en controller, skicka med dess signal och anropa abort() för att avbryta.
// 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);
Omslag med tidsgräns
Använd Promise.race för att avvisa om uppgiften tar för lång tid; rensa timern i 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); });
Tidsgräns och abort tillsammans
Om tidsgränsen vinner ska ni anropa abort() så att det underliggande arbetet stoppas tidigt.
// 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); });
Tips och checklista
Tips:
- Rensa alltid timers i finally.
- Skicka med signal till uppgifter och kontrollera signal.aborted.
- Föredra en controller per begäran.
Quiz om grunderna i AbortController
Snabb kontroll: Avbrytningsmönster.
Sammanfattning
Sammanfattning: Ni byggde en signalmedveten uppgift, avbröt den med AbortController, lade till en timeout via Promise.race och kombinerade båda för säkra tidiga avslut.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Tidsgränser och avbrytning med AbortController” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Tidsgränser och avbrytning med AbortController”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Tidsgränser och avbrytning med AbortController”?
Lägg till tidsgränser i asynkron kod och avbryt arbete med AbortController; koppla signaler till uppgifter så att de stoppas tidigt. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 3.
Hur lång tid tar lektionen ”Tidsgränser och avbrytning med AbortController”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Skriva async-funktioner; try/catch; parallellt kontra sekventiellt
- Tidsgränser och avbrytning med AbortController
- Mönster för omförsök och backoff