“AbortController” pour annuler une requête “fetch”

Aujourd’hui, je suis tombé par hasard sur la documentation d’AbortController, qui permet d’annuler une requête fetch avant son la fin de son exécution. Cela peut être très utile dans le cas où l’on souhaite permettre à un utilisateur d’empêcher un téléchargement trop long d’arriver à son terme par exemple.

Pour le mettre en place, c’est assez simple :

// on instancie un nouveau AbortController
const controller = new AbortController();
const signal = controller.signal;

// au clic sur le bouton d'annulation, on utilise le 'controller' pour annuler la requête
abortBtn.addEventListener('click', () => {
  controller.abort();
});

// lors du 'fetch', on passe le 'signal' en paramètre
fetch(url, { signal })
  .then(response => { ... })
  .catch(e => { // si la requête est annulée, la promesse est rejetée
    console.error('Download error: ' + e.message);
  })

Voilà, c’est aussi simple que ça ! Si tu veux en savoir plus, ça se passe ici : https://developer.mozilla.org/en-US/docs/Web/API/AbortController