Fech Robusto con Reintentos
La clave para que fetch sea robusto es encerrar la petición en un bucle que intente la operación varias veces, solo deteniéndose cuando tiene éxito o se agotan los intentos.
El Código Esencial
async function fetchDataRobusto(url) {
const MAX_REINTENTOS = 3;
const DELAY_MS = 1500; // Pausa de 1.5s entre reintentos
for (let intento = 1; intento <= MAX_REINTENTOS; intento++) {
try {
// 1. PETICIÓN: Ejecutar la llamada a la API
const response = await fetch(url);
// 2. VERIFICACIÓN: Comprobar el éxito HTTP (200-299)
if (!response.ok) {
// Si falla (4xx o 5xx), forzamos un error para ir al 'catch'
throw new Error(`Estado: ${response.status}`);
}
// 3. ÉXITO: Convertir y retornar los datos
const data = await response.json();
console.log( Éxito en el intento #${intento}.`);
return data; // Salimos de la función y del bucle
} catch (error) {
// 4. FALLO: Manejo del error
console.error( Fallo en el intento #${intento}: ${error.message}`);
// 5. DECISIÓN FINAL: Si es el último intento, lanzamos el error definitivo
if (intento === MAX_REINTENTOS) {
console.error('Fallo total después de agotar los reintentos.');
throw new Error('Fallo definitivo.');
}
// 6. ESPERA: Pausa asíncrona antes del siguiente intento
await new Promise(resolve => setTimeout(resolve, DELAY_MS));
}
}
}
Flujo de la Lógica (Paso a Paso)
| Paso | Descripción | Palabras Clave |
| 1. Inicialización | Se define el número de reintentos (MAX_REINTENTOS) y se inicia el bucle for. | for, MAX_REINTENTOS |
| 2. Intento | El código entra en el bloque try e intenta la petición (fetch). | try, await fetch(url) |
| 3. Validación | Se verifica la propiedad response.ok. Si es falso (ej. 404), se lanza un throw new Error. | response.ok, throw |
| 4. Éxito | Si response.ok es verdadero, se procesa el JSON y se retorna el resultado, finalizando la función. | return data |
| 5. Fallo | Si ocurre un error de red o el error forzado en el paso 3, el control pasa al bloque catch. | catch (error) |
| 6. Último Chance | Se verifica si el intento actual es el MAX_REINTENTOS. Si lo es, se lanza un error final y la función termina con fallo. | if (intento === MAX_REINTENTOS) |
| 7. Espera | Si quedan intentos, la ejecución se pausa (await new Promise(...)) por el tiempo definido para darle un respiro al servidor antes de reintentar. | await, setTimeout, DELAY_MS |
Cómo Llamar a la Función
Simplemente envuelve la llamada en otro try...catch para manejar el fallo definitivo si los 3 intentos fallan:
async function iniciarPeticion() {
try {
const datos = await fetchDataRobusto('tu_ruta_de_api');
// Usar los 'datos' si la petición fue exitosa
// ...
} catch (errorDefinitivo) {
// Manejar el error que ocurre después de 3 fallos
alert('No se pudo conectar después de varios intentos.');
}
}
iniciarPeticion();