AbortController para la limpieza
Cree un AbortController, pase su señal a fetch y cancele las solicitudes en curso en la función de limpieza para evitar actualizaciones de estado en componentes desmontados.
AbortController para la limpieza es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Por qué cancelar las solicitudes fetch?
Cuando un componente se desmonta o vuelve a obtener datos, la solicitud anterior puede seguir en curso. Si se resuelve después de la nueva solicitud, los datos obsoletos sobrescriben los actualizados. AbortController cancela limpiamente las solicitudes en curso.
Conceptos básicos de AbortController
Cree un AbortController, pase su signal a fetch y llame a controller.abort() para cancelar. Fetch genera un AbortError cuando se cancela.
const controller = new AbortController();
try {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
console.log('Request was cancelled');
} else {
setError((err as Error).message);
}
}
// To cancel:
controller.abort();En la limpieza de useEffect
Cree un AbortController al principio del efecto y llame a abort() en la función de limpieza. Esto cancela automáticamente la solicitud cuando cambian las dependencias o se desmonta el componente.
useEffect(() => {
const controller = new AbortController();
async function load() {
try {
const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
if (!res.ok) throw new Error(`${res.status}`);
setUser(await res.json());
} catch (err) {
if ((err as DOMException).name !== 'AbortError') {
setError((err as Error).message);
}
}
}
load();
return () => controller.abort();
}, [userId]);AbortError frente a error de red
Una solicitud cancelada genera una DOMException con el nombre «AbortError». Compruébelo siempre de forma específica y no lo muestre como un error visible para el usuario: es una limpieza esperada.
Propiedad signal.aborted
Compruebe controller.signal.aborted para saber si una señal se ha cancelado. Resulta útil comprobarlo antes de llamar a setState en código asíncrono.
const data = await fetchData();
if (!controller.signal.aborted) {
setData(data); // safe to update state
}Cancelación de varias solicitudes
Un AbortController puede cancelar varias solicitudes fetch si pasa la misma señal a todas ellas.
const controller = new AbortController();
const { signal } = controller;
await Promise.all([
fetch('/api/users', { signal }),
fetch('/api/products', { signal }),
fetch('/api/settings', { signal }),
]);
controller.abort(); // cancels all threeAbortController con Axios
Axios admite la señal de AbortController mediante la opción signal de la configuración. La interfaz de la señal es la misma que en fetch.
const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });
// In cleanup:
return () => controller.abort();React Query lo gestiona automáticamente
Al usar TanStack Query (React Query), la cancelación se gestiona automáticamente. React Query crea y cancela los controladores internamente. Esta es una de las razones para preferirlo a los patrones manuales de fetch.
Tiempo de espera con AbortController
Combine AbortController con setTimeout para implementar tiempos de espera de las solicitudes.
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout
try {
const data = await fetch(url, { signal: controller.signal });
// ...
} finally {
clearTimeout(timeoutId);
}AbortSignal.timeout(): atajo moderno
En los navegadores modernos, AbortSignal.timeout(ms) crea una señal que se cancela automáticamente después de la duración especificada, sin necesidad de un controlador manual.
const res = await fetch('/api/data', {
signal: AbortSignal.timeout(5000) // 5 second timeout
});La limpieza es fundamental en React 18 Strict Mode
React 18 Strict Mode monta los efectos dos veces durante el desarrollo. Sin una limpieza con AbortController, verá solicitudes fetch duplicadas y posibles advertencias de actualización del estado de un componente desmontado. El patrón de limpieza evita ambos problemas.
Comprobación rápida
¿Cómo evita que una respuesta de red obsoleta actualice el estado después de que un componente vuelva a renderizarse?
Resumen: AbortController
Cree un AbortController por efecto. Pase signal a fetch o axios. Cancele en la función de limpieza. Ignore AbortError: es esperado. Use signal.aborted antes de llamar a setState en código asíncrono. Un controlador puede cancelar muchas solicitudes. Use AbortSignal.timeout() para los tiempos de espera. React Query gestiona todo esto automáticamente.
Preguntas frecuentes
¿La lección «AbortController para la limpieza» es gratis?
Sí — el texto completo de «AbortController para la limpieza» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «AbortController para la limpieza»?
Cree un AbortController, pase su señal a fetch y cancele las solicitudes en curso en la función de limpieza para evitar actualizaciones de estado en componentes desmontados. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «AbortController para la limpieza»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de useEffect: dependencias y limpieza
- Obtener datos al montar el componente
- Gestionar estados de carga y error
- AbortController para la limpieza