React
Tutorial React: Solicitudes HTTP con Axios
React y Axios: Aprende a realizar solicitudes HTTP. Tutorial completo para gestionar GET, POST, PUT, PATCH, DELETE y manejar errores en tu proyecto.
Aprende React y certifícateQué es Axios y cómo se instala en un proyecto de React
Axios es una biblioteca de JavaScript que se utiliza para realizar solicitudes HTTP desde el navegador y Node.js. Permite interactuar con APIs de manera sencilla y eficiente, facilitando el manejo de peticiones y respuestas HTTP. Axios es compatible con Promesas, lo que lo hace ideal para trabajar con async/await en aplicaciones modernas de React.
Para instalar Axios en un proyecto de React, sigue los siguientes pasos:
- Instalación de Axios: Primero, asegúrate de tener un proyecto de React creado y configurado. Puedes instalar Axios usando npm o yarn:
npm install axios
o
yarn add axios
- Configuración global de Axios (Opcional): Puedes configurar Axios globalmente para establecer configuraciones comunes como la URL base, encabezados comunes, etc. Esto puede ser útil para evitar repetición de código en solicitudes múltiples:
// axios.config.js
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'https://fakestoreapi.com',
headers: {'Authorization': 'Bearer TOKEN'}
});
export default axiosInstance;
Al seguir estos pasos, habrás instalado y configurado Axios en tu proyecto de React, permitiéndote realizar solicitudes HTTP de manera sencilla y eficiente.
Realizar una solicitud GET
Para realizar una solicitud GET en un proyecto de React utilizando Axios, es fundamental comprender cómo interactuar con una API y manejar la respuesta obtenida. En el contexto de Axios, las solicitudes GET son útiles para recuperar datos del servidor.
Ejemplo de cómo realizar una solicitud GET y manejar la respuesta en un componente de React:
// Productos.jsx
import { useEffect, useState } from 'react';
import axios from 'axios';
export default function Productos() {
const [productos, setProductos] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProductos = async () => {
try {
const response = await axios.get('https://fakestoreapi.com/products');
setProductos(response.data);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};
fetchProductos();
}, []);
if (loading) {
return <p>Cargando productos...</p>;
}
if (error) {
return <p>Error al cargar productos: {error.message}</p>;
}
return (
<div>
<h1>Lista de Productos</h1>
<ul>
{productos.map(producto => (
<li key={producto.id}>{producto.title}</li>
))}
</ul>
</div>
);
}
Este componente Productos
utiliza Axios para realizar una solicitud GET a la API https://fakestoreapi.com/products
y recuperar una lista de productos.
- Estado Inicial: Se definen tres estados usando
useState
:productos
para almacenar los productos,loading
para indicar si la carga está en proceso, yerror
para capturar cualquier error que ocurra durante la solicitud. - Efecto Secundario:
useEffect
se usa para realizar la solicitud GET cuando el componente se monta. La funciónfetchProductos
es asíncrona, lo que permite manejar la solicitud y la respuesta de manera eficiente. - Manejo de la Respuesta: Si la solicitud es exitosa, los datos se guardan en el estado
productos
. Si ocurre un error, este se guarda enerror
. Finalmente, se estableceloading
enfalse
para indicar que la carga ha terminado. - Renderizado Condicional: Mientras
loading
seatrue
, se muestra un mensaje de carga. Si hay un error, se muestra un mensaje de error. Si todo va bien, se renderiza la lista de productos.
Realizar una solicitud POST
Para enviar datos al servidor en un proyecto de React utilizando Axios, puedes realizar una solicitud POST. Esto es útil para crear nuevos recursos en una API.
Ejemplo de cómo hacer una solicitud POST con Axios:
// CrearProducto.jsx
import { useState } from 'react';
import axios from 'axios';
export default function CrearProducto() {
const [nombre, setNombre] = useState('');
const [precio, setPrecio] = useState('');
const [categoria, setCategoria] = useState('');
const [mensaje, setMensaje] = useState(null);
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post('https://fakestoreapi.com/products', {
title: nombre,
price: precio,
category: categoria,
});
setMensaje(`Producto creado con ID: ${response.data.id}`);
} catch (error) {
setMensaje(`Error al crear producto: ${error.message}`);
}
};
return (
<div>
<h1>Crear Producto</h1>
<form onSubmit={handleSubmit}>
<label>Nombre:
<input
type="text"
value={nombre}
onChange={(e) => setNombre(e.target.value)}
/>
</label>
<label>Precio:
<input
type="number"
value={precio}
onChange={(e) => setPrecio(e.target.value)}
/>
</label>
<label>Categoría:
<input
type="text"
value={categoria}
onChange={(e) => setCategoria(e.target.value)}
/>
</label>
<button type="submit">Crear</button>
</form>
{mensaje && <p>{mensaje}</p>}
</div>
);
}
Este componente CrearProducto
permite al usuario enviar un nuevo producto a la API.
- Estado Inicial: Se manejan los estados para
nombre
,precio
,categoria
, ymensaje
usandouseState
. - Manejo del Formulario: Cuando se envía el formulario, se realiza una solicitud POST a
https://fakestoreapi.com/products
con los datos del nuevo producto. - Manejo de la Respuesta: Si la creación es exitosa, se muestra un mensaje con el ID del nuevo producto. Si falla, se muestra un mensaje de error.
Realizar una solicitud PUT y PATCH
Para realizar una solicitud PUT y PATCH en un proyecto de React utilizando Axios, es fundamental conocer la diferencia entre ambas. A continuación se explica cómo realizar ambas solicitudes utilizando Axios.
Solicitud PUT
La solicitud PUT se utiliza para actualizar completamente un recurso existente en el servidor.
Ejemplo de cómo realizar una solicitud PUT para actualizar un producto en la API https://fakestoreapi.com/products
.
// ActualizarProducto.jsx
import { useState } from 'react';
import axios from 'axios';
export default function ActualizarProducto() {
const [productoId, setProductoId] = useState('');
const [titulo, setTitulo] = useState('');
const [precio, setPrecio] = useState('');
const [descripcion, setDescripcion] = useState('');
const [imagen, setImagen] = useState('');
const [categoria, setCategoria] = useState('');
const [mensaje, setMensaje] = useState('');
const manejarSubmit = async (evento) => {
evento.preventDefault();
try {
const respuesta = await axios.put(`https://fakestoreapi.com/products/${productoId}`, {
title: titulo,
price: parseFloat(precio),
description: descripcion,
image: imagen,
category: categoria
});
setMensaje(`Producto actualizado con ID: ${respuesta.data.id}`);
} catch (error) {
setMensaje(`Error actualizando producto: ${error.message}`);
}
};
return (
<div>
<h1>Actualizar producto</h1>
<form onSubmit={manejarSubmit}>
<label>ID del Producto:
<input type="text" value={productoId} onChange={(e) => setProductoId(e.target.value)} />
</label>
<label>Título:
<input type="text" value={titulo} onChange={(e) => setTitulo(e.target.value)} />
</label>
<label>Precio:
<input type="number" value={precio} onChange={(e) => setPrecio(e.target.value)} />
</label>
<label>Descripción:
<textarea value={descripcion} onChange={(e) => setDescripcion(e.target.value)} />
</label>
<label>Imagen:
<input type="file" value={imagen} onChange={(e) => setImagen(e.target.value)} />
</label>
<label>Categoría:
<select name="category" id="category" value={categoria} onChange={(e) => setCategoria(e.target.value)}>
<option value="electronics">Electronics</option>
<option value="jewelery">Jewelery</option>
<option value="men's clothing">Men's Clothing</option>
<option value="women's clothing">Women's Clothing</option>
</select>
</label>
<button type="submit">Actualizar Producto</button>
</form>
{mensaje && <p>{mensaje}</p>}
</div>
);
}
El componente ActualizarProducto
permite actualizar completamente un producto existente.
- Estado Inicial: Se manejan los estados para el ID del producto, título, precio, descripción, imagen, categoría y mensaje.
- Manejo del Formulario: Al enviar el formulario, se realiza una solicitud PUT a
https://fakestoreapi.com/products/${productoId}
con los datos actualizados. - Manejo de la Respuesta: Si la actualización es exitosa, se muestra un mensaje de éxito. Si falla, se muestra un mensaje de error.
Solicitud PATCH
La solicitud PATCH se utiliza para actualizar parcialmente un recurso existente en el servidor.
Ejemplo de cómo realizar una solicitud PATCH para actualizar parcialmente un producto en la API https://fakestoreapi.com/products
.
// ActualizarProductoParcial.jsx
import { useState } from 'react';
import axios from 'axios';
export default function ActualizarProductoParcial() {
const [productoId, setProductoId] = useState('');
const [titulo, setTitulo] = useState('');
const [mensaje, setMensaje] = useState('');
const manejarSubmit = async (evento) => {
evento.preventDefault();
try {
const respuesta = await axios.patch(`https://fakestoreapi.com/products/${productoId}`, {
title: titulo
});
setMensaje(`Producto actualizado con ID: ${respuesta.data.id}`);
} catch (error) {
setMensaje(`Error actualizando producto: ${error.message}`);
}
};
return (
<div>
<h1>Actualizar título del producto</h1>
<form onSubmit={manejarSubmit}>
<label>ID del Producto:
<input type="text" value={productoId} onChange={(e) => setProductoId(e.target.value)} />
</label>
<label>Título:
<input type="text" value={titulo} onChange={(e) => setTitulo(e.target.value)} />
</label>
<button type="submit">Actualizar Título</button>
</form>
{mensaje && <small>{mensaje}</small>}
</div>
);
}
El componente ActualizarProductoParcial
permite actualizar parcialmente un producto, en este caso, solo el título.
- Estado Inicial: Se manejan los estados para el ID del producto, título y mensaje.
- Manejo del Formulario: Al enviar el formulario, se realiza una solicitud PATCH a
https://fakestoreapi.com/products/${productoId}
para actualizar el título del producto. - Manejo de la Respuesta: Se muestra un mensaje de éxito o de error según el resultado de la operación.
Realizar una solicitud DELETE
En React, la realización de una solicitud DELETE con Axios se utiliza para eliminar un recurso específico en una API backend. Este tipo de solicitud es fundamental cuando se necesita eliminar datos en el servidor.
Ejemplo de cómo realizar una solicitud DELETE para eliminar un producto en la API https://fakestoreapi.com/products
.
// EliminarProducto.jsx
import { useState } from 'react';
import axios from 'axios';
export default function EliminarProducto() {
const [productoId, setProductoId] = useState('');
const [mensaje, setMensaje] = useState(null);
const handleDelete = async (e) => {
e.preventDefault();
try {
await axios.delete(`https://fakestoreapi.com/products/${productoId}`);
setMensaje(`Producto con ID: ${productoId} eliminado con éxito.`);
} catch (error) {
setMensaje(`Error al eliminar producto: ${error.message}`);
}
};
return (
<div>
<h1>Eliminar Producto</h1>
<form onSubmit={handleDelete}>
<label>ID del Producto:
<input
type="text"
value={productoId}
onChange={(e) => setProductoId(e.target.value)}
/>
</label>
<button type="submit">Eliminar</button>
</form>
{mensaje && <small>{mensaje}</small>}
</div>
);
}
El componente EliminarProducto
permite al usuario eliminar un producto de la API.
- Estado Inicial: Se maneja el estado para el ID del producto y el mensaje de éxito o error.
- Manejo del Formulario: Al enviar el formulario, se realiza una solicitud DELETE a
https://fakestoreapi.com/products/${productoId}
para eliminar el producto. - Manejo de la Respuesta: Se muestra un mensaje de éxito si la eliminación es exitosa, o un mensaje de error si falla.
Manejo de errores con axios
El manejo de errores es una parte crucial al trabajar con solicitudes HTTP en React utilizando Axios. Cuando se realiza una solicitud HTTP, pueden ocurrir varios tipos de errores, como problemas de red, respuestas con códigos de estado HTTP que indican un error (por ejemplo, 404 o 500), o problemas en el código del cliente. Es esencial manejar estos errores adecuadamente para proporcionar una buena experiencia de usuario y depurar problemas de manera eficiente.
Manejo de errores
En algunos casos, es útil manejar diferentes tipos de errores de manera específica. Por ejemplo, puede ser necesario diferenciar entre errores de red y errores de respuesta HTTP. Axios facilita esto proporcionando detalles sobre el error en el objeto de error (error
).
Ejemplo de como manejar errores en una solicitud GET:
// Productos.jsx
import { useEffect, useState } from 'react';
import axios from 'axios';
export default function Productos() {
const [productos, setProductos] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.get('https://fakestoreapi.com/products');
setProductos(response.data);
} catch (error) {
if (error.response) {
// El servidor respondió con un código de estado que no está en el rango de 2xx
setError(`Error del servidor: ${error.response.status} - ${error.response.data}`);
} else if (error.request) {
// La solicitud se hizo, pero no se recibió respuesta
setError('Error de red: No se recibió respuesta del servidor.');
} else {
// Algo pasó al configurar la solicitud que desencadenó un error
setError(`Error en la configuración de la solicitud: ${error.message}`);
}
console.error('Error al obtener los productos:', error);
}
};
fetchData();
}, []);
return (
<div>
<h1>Lista de Productos</h1>
{error && <small>{error}</small>}
<ul>
{productos.map(producto => (
<li key={producto.id}>{producto.title}</li>
))}
</ul>
</div>
);
}
En este ejemplo, el componente Productos
realiza una solicitud GET y maneja diferentes tipos de errores:
- Error de Respuesta del Servidor: Si el servidor responde con un código de error, se captura el código de estado y el mensaje del servidor.
- Error de Red: Si no se recibe una respuesta del servidor, se muestra un mensaje de error de red.
- Otros Errores: Si hay un problema en la configuración de la solicitud, se captura y muestra el mensaje de error correspondiente.
Interceptores de Axios
Los interceptores de Axios permiten interceptar y modificar las solicitudes o respuestas antes de que sean manejadas por el código del cliente. Esto es útil para implementar un manejo de errores global en toda la aplicación.
Ejemplo de como crear un interceptor en Axios:
// axios.config.js
import axios from 'axios';
const axiosInstance = axios.create({
baseURL: 'https://fakestoreapi.com',
});
// Interceptor de respuesta
axiosInstance.interceptors.response.use(
response => response,
error => {
if (error.response) {
// Manejo de errores de respuesta HTTP
console.error(`Error del servidor: ${error.response.status} - ${error.response.data}`);
} else if (error.request) {
// Manejo de errores de red
console.error('Error de red: No se recibió respuesta del servidor.');
} else {
// Manejo de otros errores
console.error(`Error en la configuración de la solicitud: ${error.message}`);
}
return Promise.reject(error);
}
);
export default axiosInstance;
En este ejemplo:
Este archivo configura una instancia de Axios con una URL base y define un interceptor de respuesta:
- Interceptor de Respuesta: Captura todos los errores de red, respuesta HTTP y configuración de la solicitud, manejándolos globalmente en la aplicación. Esto evita la necesidad de manejar errores en cada solicitud individualmente.
Luego, esta instancia de Axios puede ser utilizada en los componentes:
// Productos.jsx
import { useEffect, useState } from 'react';
import axiosInstance from '../../../axios.config';
export default function Productos() {
const [productos, setProductos] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await axiosInstance.get('/products');
setProductos(response.data);
} catch (error) {
setError('Error al obtener los productos. Por favor, inténtelo de nuevo más tarde.');
}
};
fetchData();
}, []);
return (
<div>
<h1>Lista de Productos</h1>
{error && <p>{error}</p>}
<ul>
{productos.map(producto => (
<li key={producto.id}>{producto.title}</li>
))}
</ul>
</div>
);
}
Aquí, el componente Productos
utiliza la instancia configurada de Axios (axiosInstance
), lo que permite manejar errores globalmente y evita repetir la configuración en cada solicitud. Los errores de red y de respuesta HTTP se manejan automáticamente a través del interceptor definido.
Ejercicios de esta lección Solicitudes HTTP con Axios
Evalúa tus conocimientos de esta lección Solicitudes HTTP con Axios con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
Estado global con Context API
Hooks: optimización y concurrencia
Introducción a React y su ecosistema
Introducción a Componentes
Introducción a los Hooks
Navegación programática y redirección
Renderizado iterativo con bucles
Rutas anidadas y rutas dinámicas
Hooks: estado y efectos secundarios
Todas las lecciones de React
Accede a todas las lecciones de React y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A React Y Su Ecosistema
Introducción Y Entorno
Instalar React Y Crear Nuevo Proyecto
Introducción Y Entorno
Introducción A Jsx
Componentes
Introducción A Componentes
Componentes
Componentes Funcionales
Componentes
Eventos En React
Componentes
Props Y Manejo De Datos Entre Componentes
Componentes
Renderizado Condicional
Componentes
Renderizado Iterativo Con Bucles
Componentes
Manejo De Clases Y Estilos
Componentes
Introducción A Los Hooks
Hooks
Estado Y Ciclo De Vida De Los Componentes
Hooks
Hooks Estado Y Efectos Secundarios
Hooks
Hooks Para Gestión De Estado Complejo Y Contexto
Hooks
Hooks Optimización Y Concurrencia
Hooks
Introducción A React Router
Navegación Y Enrutamiento
Definición Y Manejo De Rutas
Navegación Y Enrutamiento
Rutas Anidadas Y Rutas Dinámicas
Navegación Y Enrutamiento
Navegación Programática Redirección
Navegación Y Enrutamiento
Nuevos Métodos Create De React Router
Navegación Y Enrutamiento
Solicitudes Http Con Fetch Api
Interacción Http Con Backend
Solicitudes Http Con Axios
Interacción Http Con Backend
Estado Local Con Usestate Y Usereducer
Servicios Y Gestión De Estado
Estado Global Con Context Api
Servicios Y Gestión De Estado
Estado Global Con Redux Toolkit
Servicios Y Gestión De Estado
Custom Hooks Para Servicios Compartidos
Servicios Y Gestión De Estado
Evaluación Test React
Evaluación
Certificados de superación de React
Supera todos los ejercicios de programación del curso de React y obtén certificados de superación para mejorar tu currículum y tu empleabilidad.
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender qué es Axios y cómo instalarlo en un proyecto React.
- Configurar Axios globalmente para manejar solicitudes comunes.
- Realizar operaciones CRUD (
GET
,POST
,PUT
,PATCH
,DELETE
) con Axios. - Manejar errores al realizar solicitudes HTTP con Axios.
- Implementar interceptores de Axios para manejo de errores globales.