Uso de Axios en React: Ejemplos para solicitudes GET y POST

Axios es un cliente HTTP basado en promesas que simplifica la realización de solicitudes HTTP en aplicaciones React. Agiliza tareas como la obtención de datos de APIs y el envío de datos a servidores. En esta guía, exploraremos cómo usar Axios en React con ejemplos prácticos para solicitudes GET y POST.

Configuración de Axios en React

Para comenzar con Axios en su proyecto de React:

1. Instalar Axios:

   npm install axios
   

2. Importar Axios en su componente:

   import axios from 'axios';
   

Realizando solicitudes GET

Una solicitud GET recupera datos de un endpoint especificado. Aquí se muestra cómo realizar una solicitud GET utilizando Axios en un componente de React:

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

function DataFetchingComponent() {
  const [data, setData] = useState([]);

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

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

export default DataFetchingComponent;

Explicación:

• Inicialización del estado: useState inicializa data como un array vacío.
• Obtención de datos: axios.get recupera datos del endpoint de la API.
• Hook de efecto: useEffect asegura que la solicitud GET se ejecute una vez después de que el componente se monte.
• Manejo de errores: Los errores se capturan y se registran en la consola.

Realizando solicitudes POST

Una solicitud POST envía datos a un servidor para crear un nuevo recurso. Aquí se muestra cómo realizar una solicitud POST utilizando Axios en un componente de React:

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

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Post creado:', response.data);
      })
      .catch(error => {
        console.error('Error al crear el post:', error);
      });
  };

  return (
    <div>
      <h1>Crear Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Título:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Cuerpo:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Enviar</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

Explicación:

• Inicialización del estado: useState inicializa title y body como cadenas vacías.
• Manejo del formulario: El formulario captura la entrada del usuario para el título y el cuerpo del post.
• Función de envío: handleSubmit evita el comportamiento predeterminado de envío del formulario, construye un objeto post y lo envía utilizando axios.post.
• Manejo de errores: Los errores se capturan y se registran en la consola.

Preguntas frecuentes

Conclusión

Axios es una herramienta poderosa para manejar solicitudes HTTP en aplicaciones React. Al comprender cómo realizar solicitudes GET y POST, puede interactuar de manera eficiente con las API y administrar datos dentro de sus componentes de React.