Comment annuler proprement un fetch avec AbortController

AbortController est un objet qui permet d’annuler proprement une opération asynchrone, comme une requête fetch. Il est particulièrement utile pour :

• Éviter les effets de bord inutiles (ex. : composant démonté mais requête toujours active).
  
• Libérer des ressources réseau ou mémoire car il permet d’interrompre le traitement associé à la réponse tel que décodage, parsing JSON, …
  
• Améliorer la réactivité de l’interface utilisateur (ex. : recherche en direct annulée à chaque frappe).

Exemple : annuler une requête fetch

const abortController = new AbortController();
const signal = abortController.signal;

fetch('/todo', { signal })
  .then(response => response.json())
  .then(data => console.log(data));

const abortBtn = document.querySelector(".abort");

abortBtn.addEventListener("click", () => {
  abortController.abort();
  console.log("Fetching aborted");
});