Le moyen simple d'annuler les demandes de récupération lorsque vous n'en avez pas besoin

Dans ce blog, je vais vous guider à travers les étapes pratiques d'annulation d'une requête de récupération à l'aide de JavaScript, en mettant l'accent sur l'API AbortController. À la fin, vous comprendrez clairement comment rendre vos applications Web plus réactives et plus conviviales.

Pourquoi auriez-vous besoin d’annuler une demande de récupération ?

L'annulation des demandes de récupération est cruciale dans les scénarios où :

• Expérience utilisateur :Lorsque les utilisateurs quittent une page, il n'est pas nécessaire de continuer à récupérer des données pour cette page.

• Optimisation de la recherche :Dans les fonctionnalités de recherche où chaque frappe déclenche une demande, il est plus efficace d'annuler la demande précédente avant d'en envoyer une nouvelle.

• Scénarios d'expiration :En cas de retards sur le réseau ou de demandes de longue durée, vous souhaiterez peut-être définir un délai d'attente et annuler la demande si elle dépasse une certaine durée.

Comprendre AbortController

L'API AbortController fournit un moyen élégant d'annuler les demandes de récupération. Cela fonctionne en créant une instance AbortController, dont le signal est transmis à la requête d'extraction. Si vous appelez la méthode abort() sur le contrôleur, elle annule la requête.

Guide étape par étape pour annuler les demandes de récupération

1. Configuration de base à l'aide d'AbortController

Commençons par l'exemple le plus basique : créer un AbortController et annuler une demande de récupération.

// Step 1: Create an instance of AbortController const controller = new AbortController(); // Step 2: Pass the signal to the fetch request fetch('https://jsonplaceholder.typicode.com/posts', { signal: controller.signal }) .then(response => response.json()) .then(data => console.log('Data:', data)) .catch(err => { if (err.name === 'AbortError') { console.log('Fetch request was canceled'); } else { console.error('Fetch error:', err); } }); // Step 3: Cancel the fetch request controller.abort();

2. Cas d'utilisation pratique : Annulation des requêtes sur l'interaction utilisateur
Un scénario courant consiste à annuler une demande d'extraction en réponse à une interaction de l'utilisateur. Par exemple, lors de la mise en œuvre d'une fonctionnalité de recherche, chaque frappe peut déclencher une nouvelle demande de récupération. L'annulation de la demande précédente évite le traitement des données obsolètes ou non pertinentes.

let controller; function search(query) { // Cancel the previous request if it exists if (controller) { controller.abort(); } // Create a new controller for the new request controller = new AbortController(); // Fetch data with the new controller fetch(`https://jsonplaceholder.typicode.com/posts?query=${query}`, { signal: controller.signal }) .then(response => response.json()) .then(data => console.log('Search results:', data)) .catch(err => { if (err.name === 'AbortError') { console.log('Previous request canceled'); } else { console.error('Fetch error:', err); } }); } // Example usage: simulate user typing search('React'); search('Vue'); // The request for 'React' is canceled

3. Implémentation du délai d'attente pour les demandes de récupération
Les délais d'attente sont essentiels lorsqu'il s'agit de conditions de réseau peu fiables. En utilisant AbortController, vous pouvez facilement implémenter un mécanisme de délai d'attente qui annule la demande de récupération si elle prend trop de temps.

function fetchWithTimeout(url, timeout = 5000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeout); return fetch(url, { signal: controller.signal }) .then(response => { clearTimeout(timeoutId); return response.json(); }) .catch(err => { if (err.name === 'AbortError') { console.log('Fetch request timed out'); } else { console.error('Fetch error:', err); } }); } // Example usage fetchWithTimeout('https://jsonplaceholder.typicode.com/posts', 3000) .then(data => console.log('Data:', data));

Gérer l'annulation de la demande de récupération avec élégance

Lors de l’annulation des demandes de récupération, il est important de les gérer avec élégance. Cela implique de faire la distinction entre les erreurs causées par les annulations et les autres types d'erreurs.

fetch(url, { signal: controller.signal }) .then(response => response.json()) .then(data => console.log(data)) .catch(err => { if (err.name === 'AbortError') { // Handle cancellation specifically console.log('Request was canceled'); } else { // Handle other types of errors console.error('Request failed', err); } });

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!