Dominando las solicitudes API con Axios Retry: Una guía completa

Imagínate esto: estás creando una aplicación web elegante. El front-end se ve perfecto, la experiencia del usuario es fluida y todo parece estar en su lugar. Pero de repente, tus llamadas a la API comienzan a fallar intermitentemente. Es una pesadilla para cualquier desarrollador. Entonces, ¿cuál es la solución? Entra en escena la reintento de solicitudes con Axios. En esta entrada del blog, exploraremos cómo implementar y optimizar el reintento de solicitudes con Axios para manejar esos molestos errores de red con elegancia. ¿Y adivina qué? Al final, ¡serás un profesional en el manejo de solicitudes de API como un campeón!

💡

Pero antes de sumergirnos en los detalles, aquí tienes algo para hacer tu vida aún más fácil. Echa un vistazo a Apidog, una potente herramienta diseñada para simplificar el desarrollo y las pruebas de API. Y lo mejor de todo, Apidog está disponible de forma GRATUITA

button

¿Por qué Axios?

Lo primero es lo primero, ¿por qué deberías usar Axios para tus solicitudes de API? Axios es un cliente HTTP basado en promesas para JavaScript. Es popular por su facilidad de uso y versatilidad, lo que te permite realizar solicitudes tanto a APIs de backend como de terceros. Soporta todos los métodos HTTP y funciona a la perfección con Node.js y aplicaciones de navegador. Además, viene con un montón de características útiles como interceptores, transformación automática de datos JSON y, lo más importante para nosotros, reintento de solicitudes.

El problema con las redes no fiables

Imagina que estás trabajando en una aplicación que depende en gran medida de las llamadas a la API. Podría ser una aplicación del tiempo, un panel de control de redes sociales o un sitio de comercio electrónico que obtiene detalles de productos. Tus usuarios esperan datos en tiempo real. Sin embargo, la fiabilidad de la red puede ser impredecible. Un breve problema en el servidor o un pequeño fallo en la red puede provocar errores en las solicitudes de la API. Aquí es donde el reintento de solicitudes con Axios viene al rescate, permitiendo que tu aplicación reintente automáticamente las solicitudes fallidas y mejore la experiencia general del usuario.

Configurando Axios

Antes de que podamos implementar el reintento de solicitudes, necesitamos configurar Axios en nuestro proyecto. Si aún no has instalado Axios, puedes hacerlo usando npm o yarn:

npm install axios

yarn add axios

Una vez instalado, puedes importar Axios y comenzar a realizar solicitudes de API. Aquí tienes un ejemplo sencillo:

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Presentando el reintento de Axios

Entonces, ¿cómo hacemos que Axios reintente una solicitud cuando falla? La respuesta está en los interceptores de Axios. Los interceptores te permiten ejecutar tu código o modificar la solicitud/respuesta antes de que se envíe la solicitud o después de que se reciba la respuesta. Para reintentar solicitudes, utilizaremos interceptores de solicitud.

Necesitaremos instalar un paquete adicional, axios-retry, que facilita la implementación de reintentos. Instálalo usando npm o yarn:

npm install axios-retry

yarn add axios-retry

A continuación, configuremos el reintento de Axios en nuestro proyecto:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, { retries: 3 });

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

En este ejemplo, hemos configurado Axios para que reintente las solicitudes fallidas hasta tres veces. ¡Es así de simple!

Personalizando el reintento de Axios

La configuración básica es genial, pero podemos hacer mucho más con el reintento de Axios. Por ejemplo, podemos personalizar la lógica de reintento en función del tipo de error, el retraso entre reintentos e incluso el retroceso exponencial.

Lógica de reintento personalizada

Personalicemos la lógica de reintento para que solo se reintente en caso de errores de red o códigos de estado específicos:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryCondition: (error) => {
    return error.response.status === 500 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

En este ejemplo, Axios reintentará la solicitud si el estado de la respuesta es 500 o si se trata de un error de red.

Retrasando entre reintentos

También puedes añadir un retraso entre reintentos para evitar bombardear el servidor con solicitudes en rápida sucesión. Aquí te mostramos cómo:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: (retryCount) => {
    return retryCount * 1000; // 1 segundo de retraso entre reintentos
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Esta configuración introduce un retraso de 1 segundo entre reintentos.

Retroceso exponencial

Para un enfoque más sofisticado, considera la posibilidad de utilizar el retroceso exponencial, que aumenta el retraso exponencialmente con cada reintento. Esto puede ser particularmente útil para dar al servidor un respiro para recuperarse.

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Manejo de métodos HTTP específicos

A veces, es posible que desees reintentar solo métodos HTTP específicos. Por defecto, axios-retry reintenta las solicitudes GET, pero puedes personalizar esto:

import axios from 'axios';
import axiosRetry from 'axios-retry';

axiosRetry(axios, {
  retries: 3,
  shouldResetTimeout: true,
  retryCondition: (error) => {
    return axiosRetry.isRetryableError(error) && error.config.method === 'get';
  }
});

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

Caso de uso real: Obtención de datos de una API

Unamos todo esto con un ejemplo del mundo real. Imagina que estás creando una aplicación del tiempo que obtiene datos de una API de terceros. Los problemas de red son comunes y quieres asegurar una experiencia de usuario fluida.

Aquí te mostramos cómo puedes implementar el reintento de Axios en tu aplicación del tiempo:

import axios from 'axios';
import axiosRetry from 'axios-retry';

// Configurar el reintento de Axios
axiosRetry(axios, {
  retries: 3,
  retryDelay: axiosRetry.exponentialDelay,
  retryCondition: (error) => {
    return error.response.status === 503 || axiosRetry.isNetworkOrIdempotentRequestError(error);
  }
});

// Función para obtener datos del tiempo
const fetchWeatherData = async (city) => {
  try {
    const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching weather data:', error);
    throw error;
  }
};

// Uso
fetchWeatherData('San Francisco')
  .then(data => {
    console.log('Weather data:', data);
  })
  .catch(error => {
    console.error('Failed to fetch weather data after retries:', error);
  });

En este ejemplo, hemos configurado Axios para que reintente las solicitudes hasta tres veces con un retraso exponencial, específicamente para errores de red o un código de estado 503.

Apidog: una herramienta gratuita para generar tu código Axios

Apidog es una plataforma de desarrollo de API colaborativa todo en uno que proporciona un conjunto de herramientas completo para diseñar, depurar, probar, publicar y simular APIs. Apidog te permite crear automáticamente código Axios para realizar solicitudes HTTP.

button

Aquí está el proceso para usar Apidog para generar código Axios:

Paso 1: Abre Apidog y selecciona nueva solicitud

Paso 2: Introduce la URL del punto final de la API al que deseas enviar una solicitud, introduce cualquier encabezado o parámetro de cadena de consulta que desees incluir con la solicitud, luego haz clic en "Diseño" para cambiar a la interfaz de diseño de Apidog.

Paso 3: Selecciona "Generar código de cliente" para generar tu código.

Paso 4: Copia el código Axios generado y pégalo en tu proyecto.

Usando Apidog para Enviar Solicitudes HTTP

Apidog ofrece varias características avanzadas que mejoran aún más su capacidad para probar solicitudes HTTP. Estas características te permiten personalizar tus solicitudes y manejar escenarios más complejos sin esfuerzo.

button

Paso 1: Abre Apidog y crea una nueva solicitud.

Paso 2: Encuentra o introduce manualmente los detalles de la API para la solicitud POST que deseas realizar.

Paso 3: Rellena los parámetros requeridos y cualquier dato que desees incluir en el cuerpo de la solicitud.

Mejores prácticas

Monitorizar los intentos de reintento

Si bien los reintentos pueden mejorar la fiabilidad, también pueden provocar un aumento de la carga en tu servidor. Monitoriza los intentos de reintento y ajusta tu lógica de reintento según sea necesario. Herramientas como Apidog pueden ayudarte a monitorizar y probar tus APIs de forma eficaz.

Manejar diferentes escenarios

Personaliza tu lógica de reintento en función de las necesidades específicas de tu aplicación. Por ejemplo, es posible que desees manejar los errores de limitación de velocidad de forma diferente implementando un retraso más largo o una estrategia de reintento diferente.

Mantener informado al usuario

Informa a tus usuarios cuando se estén produciendo reintentos, especialmente si esto provoca un retraso notable. Esto puede ser tan sencillo como mostrar un indicador de carga o un mensaje que indique que la aplicación está intentando volver a conectarse.

Limitar los intentos de reintento

Evita los reintentos infinitos estableciendo un límite razonable. Esto evita que tu aplicación se quede atascada en un bucle sin fin de solicitudes fallidas.

Conclusión

Dominar el reintento de solicitudes con Axios puede mejorar significativamente la fiabilidad y la experiencia del usuario de tus aplicaciones web. Al personalizar la lógica de reintento, introducir retrasos y manejar diferentes escenarios, puedes asegurarte de que tu aplicación se recupere con elegancia de los problemas de red.

¿Listo para llevar tu desarrollo de API al siguiente nivel? No olvides echar un vistazo a Apidog para obtener un conjunto de herramientas completo que simplifica el desarrollo y las pruebas de API. Con Apidog, estarás equipado para manejar cualquier desafío de API que se te presente.

button