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 les données de cette page.

• Optimisation de la recherche : Dans les fonctionnalités de recherche où chaque frappe déclenche une requête, il est plus efficace d'annuler la requête 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'expiration 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 empêche 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'expiration 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 d’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);
        }
    });