AbortController pour le nettoyage
Créez un AbortController, transmettez son signal à fetch et annulez les requêtes en cours dans la fonction de nettoyage afin d’empêcher les mises à jour d’état sur des composants démontés.
AbortController pour le nettoyage est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi annuler les requêtes de récupération ?
Lorsqu’un composant est démonté ou effectue une nouvelle récupération, la requête précédente peut toujours être en cours. Si elle aboutit après la nouvelle requête, des données obsolètes remplacent les données à jour. AbortController annule proprement les requêtes en cours.
Notions de base d’AbortController
Créez un AbortController, transmettez son signal à fetch et appelez controller.abort() pour annuler la requête. fetch lève une AbortError lorsqu’il est annulé.
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();Dans le nettoyage de useEffect
Créez un AbortController au début de l’effet et appelez abort() dans la fonction de nettoyage. Cela annule automatiquement la requête lorsque les dépendances changent ou que le composant est démonté.
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 ou erreur réseau
Une requête annulée lève une DOMException dont le nom est « AbortError ». Vérifiez toujours ce cas spécifiquement et ne l’affichez pas comme une erreur visible par l’utilisateur : il s’agit d’un comportement de nettoyage attendu.
Propriété signal.aborted
Vérifiez controller.signal.aborted pour déterminer si un signal a été annulé. C’est utile pour vérifier ce point avant un appel à setState dans du code asynchrone.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Annuler plusieurs requêtes
Un AbortController peut annuler plusieurs requêtes fetch en transmettant le même signal à chacune d’elles.
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 avec Axios
Axios prend en charge le signal d’AbortController grâce à l’option signal de la configuration. L’interface signal est la même que celle de fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query gère cela automatiquement
Avec TanStack Query (React Query), l’annulation est gérée pour vous. React Query crée et annule les contrôleurs en interne. C’est l’une des raisons de le préférer aux modèles de récupération manuelle.
Délai d’expiration avec AbortController
Combinez AbortController avec setTimeout pour mettre en œuvre des délais d’expiration des requêtes.
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() — raccourci moderne
Dans les navigateurs modernes, AbortSignal.timeout(ms) crée un signal qui s’annule automatiquement après la durée indiquée, sans nécessiter de contrôleur manuel.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});Le nettoyage est essentiel avec le mode Strict de React 18
Le mode Strict de React 18 monte deux fois les effets en développement. Sans nettoyage avec AbortController, vous verrez des récupérations en double et potentiellement des avertissements concernant l’état d’un composant démonté. Le modèle de nettoyage évite ces deux problèmes.
Vérification rapide
Comment empêcher une réponse réseau obsolète de mettre à jour l’état après un nouveau rendu du composant ?
Récapitulatif : AbortController
Créez un AbortController par effet. Transmettez signal à fetch ou à axios. Annulez la requête dans la fonction de nettoyage. Ignorez AbortError : c’est un cas attendu. Utilisez signal.aborted avant setState dans le code asynchrone. Un contrôleur peut annuler de nombreuses requêtes. Utilisez AbortSignal.timeout() pour les délais d’expiration. React Query gère tout cela automatiquement.
Questions Fréquemment Posées
La leçon « AbortController pour le nettoyage » est-elle gratuite ?
Oui — le texte complet de « AbortController pour le nettoyage » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « AbortController pour le nettoyage » ?
Créez un AbortController, transmettez son signal à fetch et annulez les requêtes en cours dans la fonction de nettoyage afin d’empêcher les mises à jour d’état sur des composants démontés. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.
Combien de temps prend la leçon « AbortController pour le nettoyage » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Bases de useEffect : dépendances et nettoyage
- Récupérer des données au montage
- Gérer les états de chargement et d’erreur
- AbortController pour le nettoyage