Axios
Axios es una biblioteca para hacer solicitudes HTTP desde el navegador o Node.js. Es compatible con Promesas y simplifica la comunicación con APIs (por ejemplo, enviar y recibir datos de un servidor). https://axios-http.com/es/
Puedes usarlo para realizar operaciones como:
- Solicitudes GET y POST.
- Manejar encabezados personalizados.
- Configuración de tiempo de espera.
- Interceptores para modificar solicitudes o respuestas.
AxiosRetry
AxiosRetry es un complemento (plugin) para Axios que permite
reintentar automáticamente solicitudes fallidas.
https://github.com/softonic/axios-retry
- Es útil cuando trabajas con redes poco confiables o APIs que pueden fallar temporalmente.
- Te permite configurar reglas específicas para el número de reintentos, tiempos entre reintentos y qué tipos de errores activarían el reintento.
Ejemplo para usar Axios y AxiosRetry
1- Instalación:
npm install axios axios-retry 2- Configuración:
Aquí hay un caso de uso donde configuras Axios con AxiosRetry para realizar
solicitudes a una API con lógica de reintento:
import axios from "axios";
import axiosRetry from "axios-retry";
// Configura Axios con un tiempo de espera y encabezados personalizados
const apiClient = axios.create({
baseURL: "https://api.ejemplo.com/v1",
timeout: 5000, // Tiempo máximo de espera (ms)
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.API_TOKEN}`
}
});
// Configura AxiosRetry para reintentar solicitudes automáticamente
axiosRetry(apiClient, {
retries: 3, // Número máximo de reintentos
retryDelay: (retryCount) => {
console.log(`Reintentando solicitud... intento #${retryCount}`);
return retryCount * 1000; // Tiempo entre intentos (ms)
},
retryCondition: (error) => {
// Reintenta solo si la respuesta es 5xx (errores del servidor)
return error.response && error.response.status >= 500;
}
});
// Función para realizar una solicitud GET y manejar errores
async function fetchData(endpoint) {
try {
const response = await apiClient.get(endpoint);
console.log("Datos recibidos:", response.data);
return response.data;
} catch (error) {
console.error("Error en la solicitud:", error.message);
if (error.response) {
console.error("Estado HTTP:", error.response.status);
}
throw error; // Relanza el error si es necesario
}
}
// Ejemplo de uso con reintento automático
(async () => {
try {
const data = await fetchData("/recurso");
console.log("Datos procesados:", data);
} catch (error) {
console.error("La solicitud falló después de varios intentos.");
}
})();
Desglose del ejemplo
-
Base URL y configuración personalizada: Configuramos un
cliente Axios con un
baseURL, encabezados personalizados y un tiempo máximo de espera. - AxiosRetry:
-
Se configuran tres reintentos.
- Se establece un retraso entre intentos que aumenta linealmente.
-
Se define una condición para reintentar solo si hay errores del
servidor (
5xx). -
fetchData: Una función asincrónica que maneja errores de
manera adecuada y utiliza el cliente configurado.
Axios en un proyecto de React JS.
Paso 1: Crear un proyecto de React
Primero, asegurémonos de tener un proyecto React configurado. Si aún no tienes uno, crea uno con Create React App (CRA):
npx create-react-app mi-proyecto
cd mi-proyecto
Paso 2: Instalar Axios
Instala la biblioteca Axios para poder realizar solicitudes HTTP:
npm install axios
Paso 3: Crear un componente funcional para consumir una API
Ahora vamos a crear un componente llamado App.js. En este
ejemplo, utilizaremos Axios para realizar una solicitud GET a la API
pública jsonplaceholder
https://jsonplaceholder.typicode.com/posts
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// Realizamos la solicitud GET con Axios
axios
.get('https://jsonplaceholder.typicode.com/posts')
.then((response) => {
setPosts(response.data); // Guardamos los datos en el estado
setLoading(false); // Indicamos que hemos terminado de cargar
})
.catch((error) => {
setError(error.message); // Manejamos errores
setLoading(false);
});
}, []); // El array vacío asegura que solo se ejecute una vez al montar el componente
return (
<div>
<h1>Lista de Publicaciones</h1>
{loading && <p>Cargando...</p>}
{error && <p>Error: {error}</p>}
<ul>
{posts.map((post) => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.body}</p>
</li>
))}
</ul>
</div>
);
}
export default App;
Paso 4: Manejar solicitudes POST con Axios
Además de las solicitudes GET, Axios también puede manejar solicitudes POST para enviar datos al servidor. Aquí tienes un ejemplo donde agregamos un formulario para crear una nueva publicación:
Agregar lógica para POST:
function App() {
const [newPost, setNewPost] = useState({ title: '', body: '' });
const [message, setMessage] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// Realizamos la solicitud POST con Axios
axios
.post('https://jsonplaceholder.typicode.com/posts', newPost)
.then((response) => {
console.log('Nueva publicación creada:', response.data);
setMessage('Publicación creada con éxito!');
})
.catch((error) => {
setMessage(`Error: ${error.message}`);
});
};
return (
<div>
{/* Formulario para crear una publicación */}
<h1>Crear Publicación</h1>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Título"
value={newPost.title}
onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
required
/>
<textarea
placeholder="Cuerpo"
value={newPost.body}
onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
required
/>
<button type="submit">Enviar</button>
</form>
{message && <p>{message}</p>}
</div>
);
}
Paso 5: Usar interceptores de Axios
Axios permite usar interceptores para modificar solicitudes o respuestas automáticamente, lo cual es útil para manejar autenticación o errores globales.
Ejemplo con interceptores:
axios.interceptors.request.use(
(config) => {
// Agregar un token de autenticación a cada solicitud
const token = 'mi-token-secreto';
config.headers.Authorization = `Bearer ${token}`;
return config;
},
(error) => {
// Manejo de errores en la solicitud
return Promise.reject(error);
}
);
axios.interceptors.response.use(
(response) => {
// Modificar la respuesta si es necesario
return response;
},
(error) => {
// Manejo global de errores en respuestas
console.error('Error en la respuesta:', error.message);
return Promise.reject(error);
}
);
Paso 6: Integrar Axios en un proyecto real
Al final, puedes estructurar tu proyecto React organizando el código de Axios en servicios separados (un patrón recomendado para mantener tu proyecto limpio). Por ejemplo:
Archivo apiService.js:
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 5000,
headers: {
'Content-Type': 'application/json'
}
});
export const getPosts = () => apiClient.get('/posts');
export const createPost = (data) => apiClient.post('/posts', data);
Luego, lo usas en tus componentes:
import React, { useEffect, useState } from 'react';
import { getPosts } from './apiService';
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
getPosts().then((response) => setPosts(response.data));
}, []);
return (
<div>
<h1>Publicaciones</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default App;