Axios

Axios es una librería popular de JavaScript que se utiliza para hacer solicitudes HTTP desde el navegador o desde Node.js. En el contexto de React, Axios es comúnmente utilizado para realizar solicitudes AJAX a APIs RESTful para obtener o enviar datos. Aquí te explico qué es, cómo se usa y te muestro varios ejemplos de cómo usar Axios en React:

¿Qué es Axios?

Axios es una librería HTTP basada en Promesas que permite realizar solicitudes de forma fácil y eficiente tanto en el navegador como en Node.js. Proporciona una interfaz limpia y simple para realizar solicitudes HTTP y manejar respuestas de manera asíncrona.

Instalación:

Para utilizar Axios en un proyecto de React, primero debes instalarlo a través de npm o yarn:

npm install axios
# o
yarn add axios

Uso en React:

Para utilizar Axios en un componente de React, simplemente importa la librería y realiza solicitudes HTTP según sea necesario.

Ejemplos de uso:

1. Realizar una solicitud GET:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const EjemploAxiosGet = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => {
                setData(response.data);
            })
            .catch(error => {
                console.error('Error al obtener datos:', error);
            });
    }, []);

    return (
        <div>
            <h1>Detalle del post:</h1>
            {data ? (
                <div>
                    <h2>{data.title}</h2>
                    <p>{data.body}</p>
                </div>
            ) : (
                <p>Cargando...</p>
            )}
        </div>
    );
};

export default EjemploAxiosGet;

En este ejemplo, estamos realizando una solicitud GET a la API JSONPlaceholder para obtener un post específico. Una vez que recibimos la respuesta, actualizamos el estado data con los datos del post.

2. Realizar una solicitud POST:

import React, { useState } from 'react';
import axios from 'axios';

const EjemploAxiosPost = () => {
    const [respuesta, setRespuesta] = useState(null);

    const enviarDatos = async () => {
        try {
            const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
                title: 'Título del post',
                body: 'Cuerpo del post',
                userId: 1
            });
            setRespuesta(response.data);
        } catch (error) {
            console.error('Error al enviar datos:', error);
        }
    };

    return (
        <div>
            <button onClick={enviarDatos}>Enviar datos</button>
            {respuesta && <p>Respuesta: {JSON.stringify(respuesta)}</p>}
        </div>
    );
};

export default EjemploAxiosPost;

En este ejemplo, estamos realizando una solicitud POST a la API JSONPlaceholder para crear un nuevo post. Una vez que enviamos los datos, mostramos la respuesta en el componente.

Buenas prácticas:

• Manejo de errores: Siempre maneja los errores de las solicitudes Axios utilizando .catch() o utilizando try/catch para las solicitudes asincrónicas.
• Cancelar solicitudes pendientes: Si estás realizando múltiples solicitudes en un componente, considera cancelar las solicitudes pendientes cuando el componente se desmonta para evitar errores.

Axios es una herramienta poderosa y flexible que facilita la realización de solicitudes HTTP en aplicaciones React. Puedes utilizarlo para interactuar con cualquier API RESTful y manejar datos de manera eficiente en tus componentes.

https://www.freecodecamp.org/espanol/news/como-usar-axios-con-react/