lunes 22 julio 2024

Cómo utilizar Axios en React

Instalación de Axios
Uso básico de Axios en React
Manejo de solicitudes POST, PUT y DELETE
Conclusión

Instalación de Axios

Primero, necesitas instalar Axios en tu proyecto de React. Abre la terminal en la raíz de tu proyecto y ejecuta el siguiente comando:

npm install axios

Uso básico de Axios en React

Vamos a ver cómo utilizar Axios en un componente de React para realizar una solicitud HTTP GET y mostrar los datos obtenidos.

1. Crear un componente de React

Supongamos que tenemos un componente llamado App donde queremos realizar una solicitud para obtener datos de una API y mostrarlos. A continuación se muestra un ejemplo de cómo podríamos hacerlo.

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

const App = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Definimos la función asíncrona que realizará la solicitud
    const fetchData = async () => {
      try {
        // Realizamos la solicitud GET
        const response = await axios.get('https://api.example.com/data');
        // Actualizamos el estado con los datos obtenidos
        setData(response.data);
      } catch (error) {
        // Si ocurre un error, lo manejamos aquí
        setError(error);
      } finally {
        // Independientemente del resultado, establecemos loading en false
        setLoading(false);
      }
    };

    // Llamamos a la función fetchData
    fetchData();
  }, []);

  // Manejamos los diferentes estados de la solicitud
  if (loading) return <div>Cargando...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Datos obtenidos:</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

2. Explicación del código

1. Importar Axios y React Hooks: Importamos Axios y los hooks useEffect y useState desde React.

2. Definir el estado: Utilizamos useState para definir tres estados: data para almacenar los datos obtenidos, loading para indicar si los datos están siendo cargados, y error para manejar cualquier error que ocurra durante la solicitud.

3. Usar useEffect para realizar la solicitud: Dentro de useEffect, definimos una función asíncrona llamada fetchData que realiza la solicitud HTTP utilizando Axios.

4. Manejo de la solicitud:

try: Intentamos obtener los datos desde la API y actualizar el estado data.
catch: Si ocurre un error, actualizamos el estado error.
finally: Sin importar el resultado, establecemos loading en false para indicar que la carga ha terminado.

5. Renderizado condicional: Dependiendo de los estados loading y error, mostramos mensajes apropiados o los datos obtenidos.

Manejo de solicitudes POST, PUT y DELETE

Solicitud POST

Para enviar datos a la API, puedes usar el método post de Axios. Aquí hay un ejemplo de cómo hacerlo:

const postData = async () => {
  try {
    const response = await axios.post('https://api.example.com/data', {
      name: 'Nuevo Elemento',
      description: 'Descripción del nuevo elemento'
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error al enviar los datos:', error);
  }
};

Solicitud PUT

Para actualizar datos en la API, puedes usar el método put de Axios:

const updateData = async (id) => {
  try {
    const response = await axios.put(`https://api.example.com/data/${id}`, {
      name: 'Elemento Actualizado',
      description: 'Descripción actualizada'
    });
    console.log(response.data);
  } catch (error) {
    console.error('Error al actualizar los datos:', error);
  }
};

Solicitud DELETE

Para eliminar datos en la API, puedes usar el método delete de Axios:

const deleteData = async (id) => {
  try {
    const response = await axios.delete(`https://api.example.com/data/${id}`);
    console.log(response.data);
  } catch (error) {
    console.error('Error al eliminar los datos:', error);
  }
};

Conclusión

Axios es una poderosa herramienta para manejar solicitudes HTTP en aplicaciones React. Su uso junto con los hooks de React como useEffect y useState permite manejar datos asíncronos de manera eficiente y sencilla. Siguiendo los ejemplos anteriores, puedes realizar solicitudes GET, POST, PUT y DELETE para interactuar con APIs en tus proyectos de React.

Etiquetas:

axios javascript react

Creado por:

Jorge García

Fullstack developer