Fetch : annulation
La capacité d'annuler les requêtes réseau en cours est essentielle pour créer des applications web réactives et efficaces. En JavaScript, l'interface AbortController offre un mécanisme puissant pour interrompre les requêtes fetch. Cet article explore l'utilisation d'AbortController pour gérer les requêtes fetch, avec des explications détaillées et des exemples pratiques pour approfondir votre compréhension. Pour en savoir plus sur fetch, consultez notre page précédente, API Fetch.
Introduction à AbortController
AbortController fait partie de l'API Fetch et vous permet d'annuler une ou plusieurs requêtes fetch. En intégrant AbortController à vos requêtes fetch, vous pouvez contrôler leur timing, garantissant qu'elles ne se poursuivent pas inutilement et ne gaspillent pas de ressources.
Utilisation de base d'AbortController
Pour annuler une requête fetch, vous devez d'abord créer une instance d'AbortController, puis passer sa propriété signal à la requête fetch. Voici un exemple basique :
Dans cet exemple, nous créons une instance d'AbortController et passons son signal à la requête fetch. En appelant controller.abort(), nous pouvons annuler la requête fetch.
Exemple pratique : annulation d'une requête fetch lors d'une action utilisateur
AbortController est particulièrement utile pour annuler les requêtes fetch en fonction des interactions utilisateur. Imaginez un scénario où un utilisateur peut interrompre une opération de récupération de données en cliquant sur un bouton :
<body>
<button id="abortButton">Abort Fetch Request</button>
<script>
const controller = new AbortController();
const signal = controller.signal;
document.getElementById('abortButton').addEventListener('click', () => {
controller.abort();
});
fetch('https://httpbin.org/delay/5', { signal })
.then(response => response.json())
.then(data => alert(
'Data is successfully fetched! Refresh the page and try aborting.'
))
.catch(error => {
if (error.name === 'AbortError') {
alert('Fetch request was aborted by the user');
} else {
alert('Fetch error: ' + error.message);
}
});
</script>
</body>Dans cet exemple, cliquer sur le bouton d'ID abortButton annulera la requête fetch en cours. Nous avons utilisé un endpoint factice qui met 5 secondes à répondre. Si vous cliquez sur le bouton avant les 5 secondes, vous interromprez la requête.
Gestion de plusieurs requêtes fetch avec AbortController
AbortController peut gérer plusieurs requêtes fetch simultanément. Vous pouvez utiliser le même contrôleur pour plusieurs requêtes fetch et les annuler toutes en une fois. Lors de l'utilisation d'AbortController, n'oubliez pas de gérer correctement l'AbortError et d'effectuer tout nettoyage nécessaire.
Dans ce scénario, la méthode controller.abort() annule toutes les requêtes fetch associées au même signal.
Utilisation avancée d'AbortController
Combinaison d'AbortController avec d'autres opérations asynchrones
AbortController peut également être combiné avec d'autres opérations asynchrones. Par exemple, vous pourriez vouloir annuler une requête fetch lorsqu'une condition spécifique est remplie dans un flux de travail asynchrone :
Dans cet exemple, la requête fetch est annulée par une autre opération asynchrone après un délai spécifié. L'API appelée via fetch est un endpoint factice qui met 5 secondes à répondre, et nous avons défini un délai pour interrompre la requête après une seconde.
Conclusion
AbortController est un outil puissant pour gérer les requêtes fetch en JavaScript. En comprenant et en utilisant AbortController, vous pouvez créer des applications web plus réactives et efficaces. Nous avons exploré diverses applications pratiques, des interruptions déclenchées par l'utilisateur à la mise en œuvre de délais d'attente et à la gestion simultanée de plusieurs requêtes fetch. Grâce à ces techniques, vous pouvez améliorer les performances et l'expérience utilisateur de vos applications web.
Pratique
Quel est l'intérêt de passer la propriété signal d'un AbortController à une requête fetch ?