Délais d’expiration et annulation avec AbortController
Ajoutez des délais d’expiration au code asynchrone et annulez le travail avec AbortController ; transmettez les signaux aux tâches pour les arrêter rapidement
Délais d’expiration et annulation avec AbortController est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.
Pourquoi utiliser des délais d’expiration et abort ?
Objectif : arrêter les tâches longues en toute sécurité.
- Ajouter un délai d’expiration simple
- Utiliser AbortController
- Relier le signal à votre tâche
- Nettoyer les minuteries
Tâche sensible au signal
Créez des tâches qui écoutent signal.abort et arrêtent la minuterie en cas d’annulation.
// 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 en action
Créez un controller, transmettez son signal et appelez abort() pour annuler.
// 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);
Enveloppe avec délai d’expiration
Utilisez Promise.race pour rejeter l’opération si la tâche prend trop longtemps ; supprimez la minuterie dans 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); });
Délai d’expiration et abort ensemble
Si le délai d’expiration l’emporte, appelez abort() afin que le travail sous-jacent s’arrête rapidement.
// 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); });
Conseils et liste de vérification
Conseils :
- Supprimez toujours les minuteries dans finally.
- Transmettez le signal aux tâches et vérifiez signal.aborted.
- Préférez un controller par requête.
Quiz sur les notions de base d’AbortController
Vérification rapide : modèle d’annulation.
Récapitulatif
Récapitulatif : Vous avez créé une tâche qui tient compte d’un signal, l’avez annulée avec AbortController, ajouté un délai d’expiration grâce à Promise.race et combiné les deux pour quitter proprement dès que nécessaire.
Questions Fréquemment Posées
La leçon « Délais d’expiration et annulation avec AbortController » est-elle gratuite ?
Oui — le texte complet de « Délais d’expiration et annulation avec AbortController » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Délais d’expiration et annulation avec AbortController » ?
Ajoutez des délais d’expiration au code asynchrone et annulez le travail avec AbortController ; transmettez les signaux aux tâches pour les arrêter rapidement Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Délais d’expiration et annulation avec AbortController » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Écrire des fonctions async ; try/catch ; exécution parallèle ou séquentielle
- Délais d’expiration et annulation avec AbortController
- Modèles de nouvelle tentative et de temporisation progressive