{"schema_version":"1.0","type":"Article","canonical_url":"https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch","machine_urls":{"markdown":"https://visteesto.com/ai/article/javascript-abortcontroller-cancelar-fetch/markdown","json":"https://visteesto.com/ai/article/javascript-abortcontroller-cancelar-fetch/json"},"publisher":{"name":"VisteEsto","url":"https://visteesto.com","editor":"Martín Rodríguez","editorial_policy":"https://visteesto.com/politica-editorial","corrections_policy":"https://visteesto.com/correcciones"},"headline":"AbortController: cómo cancelar un fetch en JavaScript","description":"Cómo cancelar una solicitud fetch con AbortController, sumar un timeout y distinguir una interrupción voluntaria de un error de red.","dek":"AbortController entrega una señal que fetch puede escuchar. Esta guía muestra cuándo abortar por navegación, botón o demora y cómo interpretar el motivo.","language":"es","section":"Tecnología","topic":"javascript-fetch-cancelacion","tags":["Programación","JavaScript","Fetch","Desarrollo web","Tecnología"],"author":{"name":"Martin Rodriguez","profile_url":"https://visteesto.com/autor/martin-rodriguez"},"date_published":"2026-10-05T15:00:00.000Z","date_modified":"2026-10-05T15:00:00.000Z","search_intent":"service","content_format":"service","primary_query":"cómo cancelar un fetch con AbortController en JavaScript","intended_audience":"Personas que programan interfaces o servicios JavaScript y necesitan cancelar solicitudes que ya no hacen falta o exceden un plazo.","original_contribution":"VisteEsto organiza las instrucciones del estándar en un recorrido de implementación: cancelación por navegación o botón, timeout, combinación de señales y manejo del motivo sin confundir errores.","key_facts":[{"statement":"AbortController entrega una señal: al abortar, la llamada fetch pendiente se rechaza con el motivo y también puede interrumpirse la lectura de un cuerpo de respuesta.","evidence_url":"https://fetch.spec.whatwg.org/#abort-fetch"},{"statement":"Si abort() se llama sin una razón, AbortSignal guarda una excepción AbortError; con abort(reason), conserva el motivo indicado.","evidence_url":"https://dom.spec.whatwg.org/#interface-abortcontroller"},{"statement":"AbortSignal.timeout() activa la señal tras un período de tiempo activo y el rechazo de fetch por timeout usa TimeoutError.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static"},{"statement":"AbortSignal.any() combina señales y se activa por la primera que se cancele, cuyo motivo permite reconocer si fue un botón o un timeout.","evidence_url":"https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal"},{"statement":"La documentación oficial vigente de Node.js 24 enumera AbortSignal.timeout() y AbortSignal.any() entre las señales disponibles en el entorno.","evidence_url":"https://nodejs.org/download/release/latest-v24.x/docs/api/globals.html"}],"sections":[{"heading":"Qué cancela AbortController en una solicitud fetch","paragraphs":["AbortController permite enviar una señal de cancelación a operaciones que la admiten, como fetch. Se crea un controlador, se pasa su propiedad signal en las opciones de la solicitud y se llama a abort() cuando esa operación deja de ser necesaria. La promesa pendiente se rechaza con el motivo de cancelación.","La interrupción también importa después de recibir los encabezados: si el cuerpo de la respuesta sigue leyéndose, abortar puede interrumpir esa lectura. Por eso, el try/catch debe abarcar tanto fetch(url, { signal }) como el await de response.json() o response.text(); cubrir sólo el primer await deja un tramo sin manejar."]},{"heading":"Cómo cancelar cuando el usuario cambia de pantalla","paragraphs":["Cada solicitud debe tener su propio controlador. Si alguien escribe una nueva búsqueda, cambia de ficha o abandona una vista, la aplicación puede abortar el pedido anterior para que una respuesta que ya perdió vigencia no siga consumiendo trabajo en el cliente. Una señal usada y abortada no se reinicia: para la siguiente operación hay que crear otro AbortController.","El botón de cancelar llama al mismo método: controller.abort(). En el catch, revisá si controller.signal.aborted o el nombre del motivo antes de mostrar un error genérico. Así la interfaz puede tratar una cancelación esperada como tal, mientras reserva el mensaje de falla para otros problemas. Si se proporciona una razón propia a abort(reason), el código puede conservarla para explicar qué acción canceló la tarea."]},{"heading":"Cómo fijar un límite de tiempo y combinar señales","paragraphs":["AbortSignal.timeout(5000) crea una señal que se activa al superar cinco segundos y usa un motivo TimeoutError. La duración se calcula como tiempo activo; puede pausarse, por ejemplo, si el documento queda en la caché de atrás/adelante. No es idéntico a medir cinco segundos de reloj en cualquier circunstancia.","Cuando sirven tanto un botón como un plazo, AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]) produce una señal que se activa si se activa cualquiera de las dos originales. El motivo indica cuál llegó primero, lo que permite distinguir AbortError de TimeoutError. Si se necesita liberar un temporizador de inmediato al terminar antes del plazo, MDN recomienda un controlador con setTimeout y clearTimeout: timeout() no ofrece una operación para cancelar su temporizador."]},{"heading":"Guía de decisión: cancelar por botón, navegación o demora","paragraphs":["Si una operación pertenece a una pantalla que puede cerrarse, vinculá su controlador al ciclo de vida de esa pantalla. Si la persona puede detenerla, conservá el controlador para su botón. Si el servicio tarda demasiado, fijá un límite adecuado al trabajo: una consulta rápida y una descarga grande no tienen por qué compartir el mismo plazo. Para cubrir dos causas, combiná las señales y conserva el motivo del rechazo.","Este mapa describe lo que fetch hace con su respuesta; no garantiza revertir acciones fuera del cliente. Node.js 24 también documenta AbortSignal.timeout() y AbortSignal.any()."]}],"sources":[{"name":"WHATWG Fetch Standard: abortar una llamada fetch","url":"https://fetch.spec.whatwg.org/#abort-fetch","kind":"primary"},{"name":"WHATWG DOM Standard: AbortController y AbortSignal","url":"https://dom.spec.whatwg.org/#interface-abortcontroller","kind":"primary"},{"name":"MDN: AbortSignal","url":"https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal","kind":"secondary"},{"name":"MDN: AbortSignal.timeout()","url":"https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/timeout_static","kind":"secondary"},{"name":"Node.js v24: globals AbortController y AbortSignal","url":"https://nodejs.org/download/release/latest-v24.x/docs/api/globals.html","kind":"primary"}],"primary_source_gap":null,"images":[{"url":"https://visteesto.com/media/javascript-abortcontroller-cancelar-fetch/cover.jpg","alt":"Diagrama editorial de una señal AbortController que interrumpe una solicitud fetch y su lectura","width":1200,"height":675,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch","caption":"Ilustración editorial: la señal de cancelación corta una operación fetch que dejó de ser necesaria."},{"url":"https://visteesto.com/media/javascript-abortcontroller-cancelar-fetch/inline-1.jpg","alt":"Secuencia propia de una solicitud fetch que se cancela al cambiar la búsqueda","width":1200,"height":800,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch","caption":"Diagrama editorial: cada pedido lleva su propia señal y puede detenerse cuando la búsqueda queda obsoleta."},{"url":"https://visteesto.com/media/javascript-abortcontroller-cancelar-fetch/inline-2.jpg","alt":"Comparación propia entre cancelación manual, timeout y combinación de señales","width":1200,"height":800,"creator":"VisteEsto","license":"VisteEsto editorial","licenseUrl":"https://visteesto.com/terminos","sourceUrl":"https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch","caption":"Guía visual: AbortSignal.any() combina la acción del usuario y el tiempo límite en una sola señal."}],"videos":[],"update_log":[{"date":"2026-10-05T15:00:00.000Z","note":"Borrador elaborado a partir de los estándares Fetch y DOM, y de la documentación de MDN sobre AbortSignal y sus métodos timeout y any."}],"citation_guidance":{"preferred_url":"https://visteesto.com/nota/javascript-abortcontroller-cancelar-fetch","include":["headline","author","date_published_or_modified","preferred_url"]}}