Annuler une requête fetch

Rappel : fetch ?

L’API fetch remplace l’objet XMLHttpRequest pour faire des requêtes AJAX. Microsoft ont été les premier à implémenter l’objet XMLHttpRequest dans Internet Explorer 5. Cet objet permet de récupérer des données depuis le serveur sans avoir à recharger la page. On utilise des callback afin de traiter les données obtenues. Or depuis plusieurs années les callback ont montrées bon nombre de faiblesses (lisibilité, traitement d’erreur, …) et ont progressivement été remplacées par les promesses. De plus, la syntaxe d’XMLHttpRequest est peu intuitive et c’est pour cela que beaucoup de methodes helper, fournit par des packages tier, ont vu le jours (comme le fammeux $.ajax() de JQuery).

Exemple XMLHttpRequest :

1
2
3
4
5
6
7
8

const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       console.log(xhttp.responseText);
    }
};
xhttp.open("GET", "https://api.github.com/users/felixbillon", true);
xhttp.send();

L’API fetch à la même raison d’être que l’objet XMLHttpRequest mais utilise les promesses et à donc une syntaxe beaucoup plus moderne et intuitive.

Exemple API Fetch :

1
2
3

fetch('https://api.github.com/users/felixbillon')
.then(response=>response.json())
.then(data=>{ console.log(data); })

Cette API est supportée par tous les navigateurs ‘evergreen’. Pour les anciennes version de navigateur et Internet Explorer il existe un polyfill.

Annuler une requête fetch

L’annulation d’une requête AJAX est un scénario que l’on rencontre très souvent notamment dans le cas d’upload/download de données pouvant être volumineuses.

L’objet XMLHttpRequest permettait déjà d’annuler une requête grâce à la methode abort(). Lors d’une annulation, un évenement abort est émis.

Pour annuler une requête fetch nous devons créer une instance de AbortController. Cette instance nous permettra
d’annuler une ou plusieurs requête fetch.
On utilise ensuite la propriété signal qui nous retourne une instance de AbortSignal. C’est cette instance qui sera passée aux requêtes fetch pour pouvoir par la suite les annuler.

Voici un exemple :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const controller = new AbortController();
const { signal } = controller;

fetch("https://api.github.com/users/felixbillon", { signal })
.then(response=>response.json())
.then(data=>{ console.log(data); })
.catch(e => {
    console.warn(`Erreur fetch felixbillon : ${e.message}`);
});

fetch("https://api.github.com/users/spontoreau", { signal })
.then(response=>response.json())
.then(data=>{ console.log(data); })
.catch(e => {
    console.warn(`Erreur fetch spontoreau : ${e.message}`);
});

setTimeout(() => controller.abort(),1000);

AbortController et AbortSignal sont supportés par tous les navigateurs ‘evergreen’. Pour les anciennes version de navigateur il existe un polyfill.