Javascript fetch con timeout

 ¿Al fetch de Javascript se le puede establecer un timeout?

¡Absolutamente! El fetch de JavaScript, por sí solo, no tiene una opción de timeout directa en su objeto de configuración (options). Sin embargo, existe una herramienta moderna y diseñada exactamente para este propósito: el AbortController.

El AbortController te permite controlar y cancelar solicitudes fetch externas, incluido el establecimiento de un límite de tiempo (timeout).

Aquí te explico cómo implementarlo y te doy un ejemplo práctico en JavaScript.

---

Implementación con AbortController y setTimeout

La técnica consiste en lo siguiente:

1. Crear una instancia de AbortController.

2. Pasar la señal de ese controlador (controller.signal) a la solicitud fetch.

3. Usar setTimeout para llamar a controller.abort() después del tiempo deseado.

Si el fetch termina antes de que expire el setTimeout, limpiamos el timer. Si el setTimeout expira primero, el fetch se cancela y lanza un error.

Código de Ejemplo

function fetchDataWithTimeout(url, timeoutMs) {

const controller = new AbortController();

const timeoutId = setTimeout(() => {

// 1. Si el tiempo expira, aborta la solicitud

controller.abort();

}, timeoutMs);

console.log(`Intentando FETCH a ${url} con timeout de ${timeoutMs}ms...`);

return fetch(url, {

method: 'GET',

// 2. Le pasamos la señal de aborto al fetch

signal: controller.signal

})

.then(response => {

// Limpiamos el timer si la solicitud fue exitosa

clearTimeout(timeoutId);

if (!response.ok) {

throw new Error(`Error HTTP: ${response.status}`);

}

return response.json();

})

.catch(error => {

// Limpiamos el timer si hubo un error (excepto el propio timeout)

clearTimeout(timeoutId);

// 3. Manejamos el error específico de AbortController

if (error.name === 'AbortError') {

throw new Error(`Tiempo de espera agotado después de ${timeoutMs}ms. (Request Cancelada)`);

}

// Manejamos otros errores de red o HTTP

throw error;

});

}

// ----------------------------------------------------------------------

// Ejemplos de Uso

// ----------------------------------------------------------------------

// 1. Éxito: La solicitud es rápida

const URL_EXITO = 'https://jsonplaceholder.typicode.com/posts/1';

fetchDataWithTimeout(URL_EXITO, 5000) // Timeout de 5 segundos

.then(data => console.log('✅ Éxito:', data.title))

.catch(error => console.error('❌ Error en el éxito:', error.message));

// 2. Fallo por Timeout (Usamos un endpoint que simula un retraso largo)

// NOTA: Este ejemplo puede fallar o tener éxito dependiendo de la velocidad

// de tu conexión, pero ilustra el concepto.

const URL_LENTA = 'https://jsonplaceholder.typicode.com/todos/1';

fetchDataWithTimeout(URL_LENTA, 50) // Timeout muy corto de 50ms

.then(data => console.log('✅ Éxito (No debería pasar):', data.title))

.catch(error => console.error('❌ Fallo por Timeout:', error.message));

Resumen del Funcionamiento

1. AbortController: Crea un objeto con una propiedad signal que se comunica con el fetch, y un método abort() que cancela cualquier fetch que esté escuchando esa señal.

2. signal en fetch: Al pasar { signal: controller.signal }, le dices a fetch que debe estar atento a las señales de cancelación.

3. setTimeout: Simplemente actúa como un cronómetro. Cuando se acaba el tiempo, llama a controller.abort(), lo que hace que la promesa del fetch se rechace inmediatamente con un error de tipo AbortError.

Esta es la manera moderna y oficial de manejar los timeouts en JavaScript.

---

The AbortController is a global JavaScript class introduced as part of the DOM specification, providing a standardized way to cancel asynchronous tasks like fetch requests, event listeners, timeouts, intervals, and streams. It works by creating an AbortController instance, which has an abort() method and a signal property. The signal can be passed to APIs such as fetch() or addEventListener() to allow cancellation when abort() is called. When abort() is invoked, the associated task is canceled, and the promise from the operation rejects with an AbortError.

This mechanism is particularly useful for improving user experience and network efficiency. For example, in a search input field, debouncing can be implemented using AbortController to abort previous API requests when the user types a new character, ensuring only the latest request completes. Similarly, AbortController can manage multiple event listeners; calling abort() removes all listeners associated with the signal, simplifying cleanup, especially in frameworks like React where cleanup functions are used. It also supports advanced patterns like AbortSignal.timeout() for automatic request timeouts and AbortSignal.any() to combine multiple abort signals into one.

The AbortController API is widely supported in modern browsers, including Chrome, Firefox, Safari, and Edge, though older versions may require a polyfill like abortcontroller-polyfill for compatibility. Its versatility extends beyond fetch requests, allowing developers to make custom logic abortable by listening for the abort event on the AbortSignal. This enables better control over long-running operations, prevents memory leaks, and enhances application responsiveness by gracefully handling canceled tasks.