Guías Técnicas

Cómo Hacer Peticiones HTTP con Axios en React: Guía Completa

React no incluye una librería específica para realizar peticiones HTTP. Sin embargo, Axios es una de las bibliotecas más populares para manejar solicitudes HTTP de manera sencilla y eficiente.

Instalación

Primero, necesitamos instalar Axios en el proyecto:

Con npm:

bash 
npm install axios

Con Yarn:

bash 
yarn add axios

Uso Básico

Para empezar, importa Axios en tu componente o archivo donde lo necesites:

jsx 
import axios from 'axios';

Ejemplo 1: Obtener Datos con GET

A continuación, veamos cómo realizar una solicitud GET:

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

function App() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        setError(error.message);
      });
  }, []);

  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
  Explicación

  1. axios.get: Realiza la solicitud GET a la URL proporcionada.
  2. then: Maneja la respuesta y actualiza el estado con los datos obtenidos.
  3. catch: Captura y maneja cualquier error en la solicitud.

Ejemplo 2: Enviar Datos con POST

Puedes usar Axios para enviar datos con una solicitud POST:

jsx 
import { useState } from 'react';
import axios from 'axios';

function App() {
  const [name, setName] = useState("");
  const [response, setResponse] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('https://jsonplaceholder.typicode.com/users', { name })
      .then((res) => {
        setResponse(res.data);
      })
      .catch((error) => {
        console.error(error.message);
      });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Nombre"
        />
        <button type="submit">Enviar</button>
      </form>
      {response && <p>Usuario creado: {JSON.stringify(response)}</p>}
    </div>
  );
}

export default App;
  Explicación

  1. axios.post: Envía datos al servidor como un objeto JSON.
  2. Cuerpo de la solicitud: En este caso, se envía un objeto { name }.
  3. Respuesta: La respuesta del servidor se utiliza para mostrar el resultado en pantalla.

Ejemplo 3: Configuración Global de Axios

Puedes configurar una instancia de Axios para reutilizarla en todo tu proyecto:

jsx 
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 1000,
  headers: { 'Authorization': 'Bearer TOKEN' }
});

export default api;

Luego, puedes usar esta instancia configurada en tus componentes:

jsx 
import { useEffect, useState } from 'react';
import api from './api';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.get('/users')
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.error(error.message);
      });
  }, []);

  return (
    <div>
      <h1>Usuarios</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
  Explicación

  1. axios.create: Crea una instancia con configuraciones predefinidas, como la URL base, tiempo de espera y encabezados.
  2. Reutilización: La instancia api se usa en cualquier parte del proyecto para realizar solicitudes.

  Recursos Adicionales

La documentación completa de Axios está disponible en su web oficial. Aquí puedes explorar funcionalidades más avanzadas como interceptores, cancelación de solicitudes y manejo de errores.