miércoles 23 octubre 2024

Cómo cancelar solicitudes HTTP con cancelToken en Axios

¿Qué es y cómo funciona `cancelToken` en Axios?

El cancelToken en Axios crea un mecanismo para cancelar solicitudes en curso. Para utilizarlo, primero necesitas generar un token de cancelación a través del método axios.CancelToken. Luego, ese token se asocia con la solicitud HTTP que deseas poder cancelar. Si decides cancelar la solicitud antes de que termine, llamas al método de cancelación.

Ejemplo básico de uso

const axios = require('axios');

// Crear un cancel token
const CancelToken = axios.CancelToken;
let cancel;

// Hacer una solicitud GET con un token de cancelación
axios.get('https://api.ejemplo.com/datos', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c; // Guardar la función de cancelación
  })
})
.then(response => {
  console.log('Datos recibidos:', response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Solicitud cancelada:', error.message);
  } else {
    console.error('Otro error:', error);
  }
});

// Cancelar la solicitud después de 1 segundo
setTimeout(() => {
  cancel('Solicitud cancelada por el usuario.');
}, 1000);

En este ejemplo, la solicitud HTTP se cancela después de 1 segundo si no ha terminado, y Axios devuelve un error indicando que la solicitud ha sido cancelada.

Ejemplos adicionales

Cancelar múltiples solicitudes

Puedes usar el mismo cancelToken para cancelar varias solicitudes simultáneamente:

const source = axios.CancelToken.source();

axios.get('https://api.ejemplo.com/usuarios', {
  cancelToken: source.token
}).catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Solicitud de usuarios cancelada');
  }
});

axios.get('https://api.ejemplo.com/posts', {
  cancelToken: source.token
}).catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Solicitud de posts cancelada');
  }
});

// Cancelar ambas solicitudes
source.cancel('Se cancelaron ambas solicitudes.');

Aquí, ambas solicitudes (usuarios y posts) se ejecutan al mismo tiempo, pero pueden cancelarse simultáneamente mediante el mismo cancelToken.

Usar cancelToken en peticiones repetidas

Es común querer cancelar solicitudes anteriores si el usuario envía repetidamente una misma petición, como en los campos de búsqueda en tiempo real.

let cancel;

function buscarUsuario(termino) {
  if (cancel) {
    cancel('Cancelando la solicitud anterior...');
  }

  axios.get(`https://api.ejemplo.com/usuarios?nombre=${termino}`, {
    cancelToken: new axios.CancelToken(function executor(c) {
      cancel = c;
    })
  })
  .then(response => {
    console.log('Resultados de la búsqueda:', response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Solicitud de búsqueda cancelada:', error.message);
    } else {
      console.error('Error en la solicitud:', error);
    }
  });
}

// Simular búsqueda del usuario
buscarUsuario('Juan'); // Se envía la primera solicitud
buscarUsuario('Pedro'); // La primera solicitud es cancelada y se realiza una nueva

En este caso, si el usuario inicia una nueva búsqueda antes de que la anterior se complete, la solicitud anterior se cancela para evitar llamadas innecesarias.

Referencia oficial

Puedes obtener más detalles sobre cancelToken en la documentación oficial de Axios.

Etiquetas:

javascript

Creado por:

Jorge García

Fullstack developer