0Pricing
JavaScript Academy · Leçon

Interrompre des requêtes avec AbortController

Annulez proprement les requêtes en cours.

Interrompre des requêtes avec AbortController est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Pourquoi annuler une requête

Il arrive que vous lanciez une requête dont vous n’avez plus besoin : l’utilisateur change de page, saisit une nouvelle recherche ou un délai d’attente expire. AbortController vous permet d’annuler une fonction de récupération en cours.

Créer un controller

Créez un AbortController. Il expose un signal que vous transmettez à la fonction de récupération, ainsi qu’une méthode abort() pour annuler.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Transmettre le signal

Transmettez le signal du controller à la fonction de récupération via l’objet d’options. La requête peut désormais être annulée.

fetch(url, { signal: controller.signal });

Appeler abort

Appelez controller.abort() pour annuler. La promesse de la fonction de récupération en attente est rejetée avec une AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Intercepter AbortError

Distinguez une annulation volontaire d’une véritable défaillance en vérifiant err.name === "AbortError" dans votre interception.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Modèle de timeout

Combinez-le avec setTimeout pour annuler automatiquement les requêtes lentes. Effacez le minuteur si la requête se termine en premier.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Assistant de timeout intégré

Les environnements modernes proposent AbortSignal.timeout(ms), qui renvoie un signal s’annulant automatiquement. C’est plus simple que de configurer vous-même setTimeout.

fetch(url, { signal: AbortSignal.timeout(5000) });

Annuler la recherche précédente

Pour une recherche au fil de la saisie, annulez la requête précédente avant d’en lancer une nouvelle. Vous éviterez ainsi que des réponses obsolètes remplacent les résultats récents.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Un signal, plusieurs récupérations

Un seul signal peut annuler plusieurs requêtes à la fois. Transmettez le même signal à plusieurs fonctions de récupération : un seul abort() les annule toutes.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Signaux déjà annulés

Si un signal est déjà annulé au moment où vous le transmettez à la fonction de récupération, la requête est immédiatement rejetée. Vérifiez signal.aborted si vous devez connaître son état.

if (controller.signal.aborted) console.log("already cancelled");

Nettoyer lors du démontage

Dans les interfaces fondées sur des composants, annulez les requêtes en attente lorsque le composant est détruit afin d’éviter de modifier l’état d’un élément qui n’existe plus.

const controller = new AbortController();
// on teardown:
controller.abort();

Vérification rapide

Annuler des requêtes de récupération.

Récapitulatif

Créez un AbortController, transmettez son signal à la fonction de récupération et appelez abort() pour annuler. La promesse est rejetée avec une AbortError, que vous pouvez détecter par son nom. Utilisez ce mécanisme pour les délais d’attente (AbortSignal.timeout), l’annulation de la recherche précédente, l’annulation de plusieurs requêtes et le nettoyage lors du démontage.

Questions Fréquemment Posées

La leçon « Interrompre des requêtes avec AbortController » est-elle gratuite ?

Oui — le texte complet de « Interrompre des requêtes 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 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Interrompre des requêtes avec AbortController » ?

Annulez proprement les requêtes en cours. 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 4 sur 4.

Combien de temps prend la leçon « Interrompre des requêtes 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

  1. Effectuer des requêtes GET
  2. POST et envoi de données
  3. Gérer les erreurs et les codes d’état
  4. Interrompre des requêtes avec AbortController
← Retour à JavaScript Academy