Tutorial React: Solicitudes HTTP con Axios

Qué 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, y error 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ón fetchProductos 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 en error. Finalmente, se establece loading en false para indicar que la carga ha terminado.
• Renderizado Condicional: Mientras loading sea true, 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, y mensaje usando useState.
• 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.