Cancelar promesas JavaScript: El truco que no conocías

El punto clave: no estés esperando que JavaScript te dé un botón de “cancel” mágico. Usá AbortController, limpiá tus timers con finally(), y manejá los AbortError de forma inteligente. Eso es lo que diferencia código que funciona de código que funciona en development pero se rompe en producción.

Conclusión

Las promesas en JavaScript no se pueden cancelar nativamente — y eso es una decisión diseñada, no una limitación accidental. Si dejara eso en manos del usuario, el código se llenaría de bugs y memory leaks.

Fuentes

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

AbortController es un objeto del navegador (desde 2017) que señaliza el interrumpir de operaciones asincrónicas. Tenés dos métodos: new AbortController() para crearlo, y .abort() para cancelar. Pasás controller.signal a cualquier API que lo soporte (fetch, eventos, etc.).

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

No directamente. Las promesas nativas no tienen método .cancel(). Lo que podés hacer es usar AbortController para señalar que querés frenar una operación asincrónica (fetch, eventos, streams) que dependa de esa promesa.

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

No todas las APIs aceptan AbortSignal. fetch() sí, addEventListener() sí, pero cosas viejas como XMLHttpRequest no. Si pasás signal a algo que no lo espera, se ignora silenciosamente y no pasa nada. Te puede servir nuestra cobertura de plataformas modernas de desarrollo.

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

No. Promise.race() solo retorna el resultado del primero que se resuelve. Los otros siguen ejecutándose. Si una promesa hace un fetch de 10 minutos y vos las ponés en race con un timeout de 5 segundos, el fetch sigue enviando datos los otros 5 minutos aunque vos ya hayas ignorado el resultado.

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

El detalle frecuente que la gente olvida: si abortás una petición pero dejás el timeout corriendo, ese timeout sigue quemando CPU innecesariamente. Siempre limpiar clearTimeout, clearInterval, event listeners — todo en un finally().

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

const timeoutId = setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }) .then(res => res.json()) .finally(() => { clearTimeout(timeoutId); // Siempre se ejecuta, cancelado o no });

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

fetch(url, { signal }) .catch(err => { if (err.name === 'AbortError') { // Es un abort intencional de vos, sin hacer nada } else if (err.name === 'TypeError') { // Posible problema de red, reintentá } else { // Otro error, loguéalo console.error(err); } }); Ya lo cubrimos antes en herramientas de IA para procesamiento.

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

function useFetch(url) { const [data, setData] = useState(null); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); fetch(url, { signal: controller.signal }) .then(res => res.json()) .then(data => setData(data)) .catch(err => { if (err.name !== 'AbortError') setError(err); }); return () => controller.abort(); // Cleanup }, [url]); return { data, error }; }

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Si usás React, un patrón común es limpiar fetches cuando el componente se desmonta:

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Si usás React, un patrón común es limpiar fetches cuando el componente se desmonta:

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

AbortController es un objeto del navegador (y Node.js) que te permite señalar “acá se interrumpe”. No cancela mágicamente — es más como un cartel de “stop” que le ponen a la operación.

Se estandarizó en 2017, según MDN, primero en Edge 16, después en el resto de navegadores. Hoy lo soporta el 92%+ del parque. Si usás Node.js, necesitás versión 15 o mayor.

Tiene dos propiedades principales:

.signal — un objeto AbortSignal que pasás a fetch, eventos, u otras APIs que lo soporten
.abort() — el método que llamás cuando querés frenar todo

Eso es. Dos cosas. Sin magia.

Cancelar peticiones fetch con AbortController

Acá viene lo práctico. Ponele que tenés un fetch que tarda un rato y el usuario se va de la página antes de que termine. Necesitás cortarlo.

Con AbortController:

const controller = new AbortController(); const signal = controller.signal; fetch('https://api.ejemplo.com/datos', { signal }) .then(res => res.json()) .then(data => console.log(data)) .catch(err => { if (err.name === 'AbortError') { console.log('Petición cancelada'); }\br> }); // Cuando querés parar: controller.abort();

El fetch recibe el signal en sus opciones. Cuando llamás .abort(), el signal emite un evento abort, el fetch se rechaza con AbortError, y el catch lo atrapa. La petición HTTP se cancela, no se gastó ancho de banda, fin de la historia (si es que la conexión ya se canceló en el navegador — para eso está el signal primero). Tema relacionado: ejecutar procesos sin APIs externas.

Con async/await, es idéntico — solo que más legible:

const controller = new AbortController(); try { const res = await fetch('https://api.ejemplo.com/datos', { signal: controller.signal }); const data = await res.json(); console.log(data); } catch (err) { if (err.name === 'AbortError') { console.log('Fetch abortado'); } else { throw err; } } controller.abort(); // Cuando necesites cancelar

Implementar timeout con Promise.race

Antes de que AbortController llegara (digamos, 2015-2017), la gente usaba Promise.race() para simular timeouts:

const fetchWithTimeout = (url, timeoutMs) => { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeoutMs); return fetch(url, { signal: controller.signal }) .then(res => {\br> clearTimeout(timeoutId); return res; }) .catch(err => {\br> clearTimeout(timeoutId); throw err; }); };

Pero hay un detalle importante (y acá muchos se equivocan): Promise.race() NO cancela las promesas perdedoras. Simplemente ignora su resultado. Si tenés dos promesas y una gana la carrera, la otra sigue corriendo en background, consumiendo recursos, hasta que se complete o falle.

Eso es por qué AbortController es superior — en verdad detiene la operación, no solo ignora el resultado.

Patrones de cancelación avanzados

Cancelar múltiples requests a la vez

Un solo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos se cancelan: Complementá con seguridad en sistemas distribuidos.

const controller = new AbortController(); Promise.all([ fetch('/api/usuarios', { signal: controller.signal }), fetch('/api/posts', { signal: controller.signal }), fetch('/api/comentarios', { signal: controller.signal }) ]) .then(responses => responses.map(r => r.json())) .catch(err => { if (err.name === 'AbortError') console.log('Todos cancelados'); }); // Abortar los tres simultáneamente controller.abort();

Custom hook para React

Si usás React, un patrón común es limpiar fetches cuando el componente se desmonta:

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

Acá está el twist: técnicamente no. Una promesa, una vez en movimiento, se ejecuta. No hay botón de “detené todo”. La comunidad de JavaScript lo pidió a gritos en 2015, 2016 — “che, necesitamos cancelar promesas” — y TC39 miró, analizó, y en esencia dijo: “no es tan simple”.

El problema es que si vos cancelás una promesa a mitad de camino, ¿qué pasa con todo lo que estaba adentro? ¿Con los timers que creaste? ¿Con la conexión a la base de datos? ¿Con el archivo que estabas escribiendo? Dejar eso en estado sucio es una bomba de time. Mejor que se complete la promesa — aunque vos la ignores — y que después limpies lo que necesites limpiar. Entonces (spoiler: esto causa debates hasta hoy) TC39 rechazó una propuesta formal de .cancel() porque el riesgo de dejar recursos colgados era mayor que el beneficio. En cambio, enfocaron los esfuerzos en algo que funciona mejor: **AbortController**.

Introducción a AbortController

cancelar promesas javascript diagrama explicativo

Se estandarizó en 2017, según MDN, primero en Edge 16, después en el resto de navegadores. Hoy lo soporta el 92%+ del parque. Si usás Node.js, necesitás versión 15 o mayor.

Tiene dos propiedades principales:

.signal — un objeto AbortSignal que pasás a fetch, eventos, u otras APIs que lo soporten
.abort() — el método que llamás cuando querés frenar todo

Eso es. Dos cosas. Sin magia.

Cancelar peticiones fetch con AbortController

Acá viene lo práctico. Ponele que tenés un fetch que tarda un rato y el usuario se va de la página antes de que termine. Necesitás cortarlo.

Con AbortController:

Con async/await, es idéntico — solo que más legible:

Implementar timeout con Promise.race

Antes de que AbortController llegara (digamos, 2015-2017), la gente usaba Promise.race() para simular timeouts:

Eso es por qué AbortController es superior — en verdad detiene la operación, no solo ignora el resultado.

Patrones de cancelación avanzados

Cancelar múltiples requests a la vez

Un solo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos se cancelan: Complementá con seguridad en sistemas distribuidos.

Custom hook para React

Si usás React, un patrón común es limpiar fetches cuando el componente se desmonta:

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.

Conclusión

Fuentes

No, las promesas nativas de JavaScript no tienen un método .cancel() que las detenga directo. TC39 rechazó esa propuesta hace años porque dejar promesas colgadas en estado incompleto genera memory leaks y deja recursos en estado sucio. La solución moderna es AbortController, un objeto estándar desde 2017 que funciona con fetch, eventos y tareas asincrónicas: creás un controlador, pasás su signal a la operación que querés frenar, y llamás a .abort() cuando necesites cancelarla.

En 30 segundos

Las promesas nativas no tienen .cancel() — esto fue rechazado por TC39 en 2016
AbortController es el estándar desde 2017 para cancelar operaciones asincrónicas (fetch, events, etc.)
Funciona en 92%+ de navegadores y Node.js v15+
Promise.race() es una alternativa antigua que no cancela realmente — solo ignora el resultado perdedor
El manejo correcto de cancellations previene memory leaks y asegura cleanup de recursos

¿Se pueden cancelar las promesas en JavaScript?

Introducción a AbortController

Se estandarizó en 2017, según MDN, primero en Edge 16, después en el resto de navegadores. Hoy lo soporta el 92%+ del parque. Si usás Node.js, necesitás versión 15 o mayor.

Tiene dos propiedades principales:

.signal — un objeto AbortSignal que pasás a fetch, eventos, u otras APIs que lo soporten
.abort() — el método que llamás cuando querés frenar todo

Eso es. Dos cosas. Sin magia.

Cancelar peticiones fetch con AbortController

Acá viene lo práctico. Ponele que tenés un fetch que tarda un rato y el usuario se va de la página antes de que termine. Necesitás cortarlo.

Con AbortController:

Con async/await, es idéntico — solo que más legible:

Implementar timeout con Promise.race

Antes de que AbortController llegara (digamos, 2015-2017), la gente usaba Promise.race() para simular timeouts:

Eso es por qué AbortController es superior — en verdad detiene la operación, no solo ignora el resultado.

Patrones de cancelación avanzados

Cancelar múltiples requests a la vez

Un solo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos se cancelan: Complementá con seguridad en sistemas distribuidos.

Custom hook para React

Si usás React, un patrón común es limpiar fetches cuando el componente se desmonta:

Cuando el componente se desmonta, el cleanup cancela el fetch. Evita el clásico “Can’t perform a React state update on an unmounted component”.

Manejo de errores y limpieza de recursos

Acá hay sutilezas. Cuando AbortController emite un abort, el error que recibís es AbortError (tipo específico). Tenés que diferenciarlo de otros errores:

Para cleanup de timers o listeners después de una cancelación, usá finally():

Errores comunes cuando cancelás promesas

Error 1: Creer que Promise.race() cancela la promesa perdedora

Error 2: No limpiar timers en finally()

Error 3: Pasar signal a un método que no lo soporta

Preguntas Frecuentes

¿Se pueden cancelar las promesas en JavaScript?

¿Cómo cancelar una petición fetch?

Creás un AbortController, pasás su signal al fetch, y cuando necesites cancelarlo, llamás a controller.abort(). La petición se interrumpe inmediatamente, sin gastar más ancho de banda.

¿Qué es AbortController y cómo se usa?

¿Cómo implementar un timeout para promesas?

Usá AbortController con setTimeout. Creás un timeout que llama controller.abort() después de N milisegundos. La promesa se rechaza con AbortError cuando expire el tiempo.

¿Cómo cancelar múltiples requests a la vez?

Un mismo AbortController puede usarse con varios fetch simultáneamente. Cuando llamás .abort(), todos los requests vinculados a ese signal se cancelan instantáneamente.