En este blog, lo guiaré a través de los pasos prácticos para cancelar una solicitud de recuperación usando JavaScript, centrándome en la API AbortController. Al final, comprenderá claramente cómo hacer que sus aplicaciones web sean más receptivas y amigables con los recursos.

¿Por qué debería cancelar una solicitud de recuperación?

Cancelar solicitudes de recuperación es crucial en escenarios donde:

• Experiencia de usuario: Cuando los usuarios salen de una página, no es necesario continuar obteniendo datos para esa página.

• Optimización de búsqueda: En las funciones de búsqueda donde cada pulsación de tecla activa una solicitud, es más eficiente cancelar la solicitud anterior antes de enviar una nueva.

• Escenarios de tiempo de espera: En caso de retrasos en la red o solicitudes de larga duración, es posible que desees establecer un tiempo de espera y cancelar la solicitud si excede una determinada duración.

Entendiendo AbortController

La API AbortController proporciona una forma elegante de cancelar solicitudes de recuperación. Funciona creando una instancia de AbortController, cuya señal se pasa a la solicitud de recuperación. Si llama al método abort() en el controlador, cancela la solicitud.

Guía paso a paso para cancelar solicitudes de recuperación

1. Configuración básica usando AbortController

Comencemos con el ejemplo más básico: crear un AbortController y cancelar una solicitud de recuperación.

// 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. Caso de uso práctico: cancelación de solicitudes durante la interacción del usuario
Un escenario común es cancelar una solicitud de recuperación en respuesta a la interacción del usuario. Por ejemplo, al implementar una función de búsqueda, cada pulsación de tecla puede desencadenar una nueva solicitud de búsqueda. Cancelar la solicitud anterior evita que se puedan tratar datos no actualizados o irrelevantes.

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. Implementación del tiempo de espera para solicitudes de recuperación
Los tiempos de espera son esenciales cuando se trata de condiciones de red poco confiables. Con AbortController, puedes implementar fácilmente un mecanismo de tiempo de espera que cancele la solicitud de recuperación si tarda demasiado.

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));

Manejar la cancelación de la solicitud de recuperación con elegancia

Al cancelar solicitudes de recuperación, es importante manejarlas con elegancia. Esto implica distinguir entre errores causados ​​por cancelaciones y otros tipos de errores.

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);
        }
    });