CÓMO HACER PETICIONES API CON AXIOS Y REACT: GUÍA COMPLETA

Introducción a las peticiones API con Axios y React

En el desarrollo moderno de aplicaciones web, hacer peticiones API es una habilidad fundamental para interactuar con servicios externos y manejar datos dinámicos. Utilizando React junto con la librería Axios para hacer solicitudes HTTP, podemos construir aplicaciones robustas que consumen y manipulan información de manera eficiente.

Una API (Interfaz de Programación de Aplicaciones) permite la comunicación entre diferentes sistemas, facilitando el acceso y la manipulación de datos. Axios es una herramienta popular en JavaScript que simplifica la realización de peticiones HTTP, ofreciendo una sintaxis clara y soporte para promesas.

A continuación, exploraremos cómo implementar las operaciones más comunes: obtener datos con GET, enviar información con POST y eliminar recursos con DELETE, además de cómo manejar errores para mejorar la experiencia del usuario.

Realizar peticiones GET para obtener datos

El método GET es utilizado para solicitar información desde una API. Por ejemplo, podemos obtener una lista de usuarios o detalles específicos de un recurso.

Para comenzar, instalamos Axios en nuestro proyecto React con el siguiente comando:

npm install axios

Luego, importamos Axios en nuestro componente y realizamos una petición GET:

import axios from "axios";
import { useEffect, useState } from "react";

function Usuarios() {
    const [usuarios, setUsuarios] = useState([]);

    useEffect(() => {
        axios
            .get("https://jsonplaceholder.typicode.com/users")
            .then((response) => {
                setUsuarios(response.data);
            })
            .catch((error) => {
                console.error("Error al obtener usuarios:", error);
            });
    }, []);

    return (
        <ul>
            {usuarios.map((usuario) => (
                <li key={usuario.id}>{usuario.name}</li>
            ))}
        </ul>
    );
}

export default Usuarios;

En este ejemplo, la función useEffect ejecuta la petición al montar el componente, y los datos recibidos se almacenan en el estado para ser renderizados. Esta es una forma sencilla y efectiva de integrar datos externos en una aplicación React.

Enviar datos con el método POST

Para crear nuevos recursos en una API, utilizamos el método POST. Esta operación permite enviar información al servidor para que sea almacenada o procesada.

Es importante configurar correctamente la petición, incluyendo los encabezados que indican el tipo de contenido que se envía, generalmente JSON.

Ejemplo de una función que envía datos con POST usando Axios:

import axios from "axios";

const crearUsuario = (usuario) => {
    return axios({
        method: "POST",
        url: "https://jsonplaceholder.typicode.com/users",
        headers: {
            "Content-Type": "application/json",
        },
        data: JSON.stringify(usuario),
    });
};

// Uso de la función
crearUsuario({
    name: "Ana Pérez",
    email: "[email protected]",
    phone: "123-456-7890",
})
    .then((response) => {
        console.log("Usuario creado:", response.data);
    })
    .catch((error) => {
        console.error("Error al crear usuario:", error);
    });

Este código muestra cómo enviar un objeto con los datos del usuario al servidor. La función retorna una promesa que puede manejarse con then y catch para controlar la respuesta o posibles errores.

Eliminar recursos con el método DELETE

La eliminación de datos es otra operación común en las APIs REST. El método DELETE permite remover un recurso específico, identificado generalmente por un ID.

Para realizar esta acción con Axios, se puede implementar una función como la siguiente:

import axios from "axios";

const eliminarUsuario = (id, token) => {
    return axios.delete(`https://api.ejemplo.com/users/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
    });
};

// Uso de la función
eliminarUsuario(1, "tu_token_de_acceso")
    .then((response) => {
        console.log("Usuario eliminado:", response.data);
    })
    .catch((error) => {
        console.error("Error al eliminar usuario:", error);
    });

En este caso, se incluye un token de autorización en los encabezados para validar la operación. Es fundamental manejar correctamente la autenticación para evitar errores y garantizar la seguridad.

Manejo de errores para mejorar la experiencia del usuario

Cuando trabajamos con peticiones API, es crucial anticipar y gestionar posibles errores que puedan surgir, ya sea por problemas de red, fallos en el servidor o datos incorrectos.

Existen varias estrategias para manejar los errores en aplicaciones React con Axios, entre las que destacan:

Mostrar mensajes claros al usuario

Informar al usuario sobre el estado de la aplicación y los errores ocurridos es esencial para mantener una buena experiencia. Podemos utilizar estados para mostrar mensajes visibles en la interfaz.

import { useState } from "react";

function Componente() {
    const [error, setError] = useState(null);

    const fetchData = () => {
        axios
            .get("https://api.ejemplo.com/data")
            .then((response) => {
                // Procesar datos
            })
            .catch((err) => {
                setError("Ocurrió un error al cargar los datos.");
                console.error(err);
            });
    };

    return (
        <div>
            {error && <p style={{ color: "red" }}>{error}</p>}
            {/* Resto del componente */}
        </div>
    );
}

Reintentar peticiones fallidas

En conexiones inestables, ofrecer la opción de reintentar puede ser muy útil. Esto se puede implementar con un botón que vuelva a ejecutar la función de petición.

const handleRetry = () => {
    setError(null);
    setLoading(true);
    fetchData()
        .then(() => setLoading(false))
        .catch(() => {
            setError("Error al intentar nuevamente.");
            setLoading(false);
        });
};

Acciones alternativas ante fallos

Cuando un error no puede resolverse inmediatamente, es recomendable ofrecer opciones alternativas, como guardar datos localmente o mostrar contenido predeterminado, para que el usuario pueda continuar utilizando la aplicación sin interrupciones.

Conclusiones

Dominar el uso de Axios junto con React para realizar peticiones API es fundamental para el desarrollo de aplicaciones web modernas. Con las operaciones GET, POST y DELETE, podemos interactuar con servicios externos para obtener, crear y eliminar datos de forma eficiente.

Además, implementar un manejo adecuado de errores permite mejorar la experiencia del usuario, asegurando que la aplicación sea robusta y confiable incluso ante fallos inesperados.

Incorporar estas prácticas en tus proyectos te permitirá construir aplicaciones más profesionales y preparadas para entornos reales, donde la comunicación con APIs es una constante.