📬 Peticiones HTTP con fetch y Axios

13 - 📬 Peticiones HTTP con fetch y Axios

Aprende a realizar peticiones HTTP para obtener o enviar datos a una API, usando las funciones fetch nativas de JavaScript y la popular librería Axios dentro de tus proyectos con Next.js.

---

🌍 ¿Qué es una petición HTTP?

Una petición HTTP es la forma en la que el navegador o el servidor se comunica con una API o servicio externo. En Next.js, podemos hacer estas peticiones tanto en el cliente (con "use client") como en el servidor.

Existen diferentes tipos de peticiones:

• GET → Obtener datos.
• POST → Enviar nuevos datos.
• PUT / PATCH → Actualizar datos existentes.
• DELETE → Eliminar datos.

---

⚙️ Uso de fetch() — Nativo en JavaScript

El método fetch() está integrado en el navegador y también disponible en el entorno de servidor de Next.js. Permite hacer solicitudes HTTP fácilmente.

📦 Ejemplo: obtener datos de una API pública

// app/usuarios/page.js
"use client";
import { useEffect, useState } from "react";

export default function UsuariosPage() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsuarios(data));
  }, []);

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">👥 Lista de Usuarios</h1>
      <ul className="mt-3">
        {usuarios.map(u => (
          <li key={u.id} className="border-b py-2">{u.name} — {u.email}</li>
        ))}
      </ul>
    </main>
  );
}
      

🧩 Resultado visual:

• 👤 Leanne Graham — leanne@example.com
• 👤 Ervin Howell — ervin@example.com
• 👤 Clementine Bauch — clementine@example.com

💡 fetch() devuelve una promesa. Siempre debes usar await o .then() para manejar la respuesta.

---

📤 Enviar datos con fetch()

También puedes enviar información al servidor usando el método POST junto con fetch().

// app/formulario/page.js
"use client";
import { useState } from "react";

export default function Formulario() {
  const [nombre, setNombre] = useState("");

  async function manejarEnvio(e) {
    e.preventDefault();
    const res = await fetch("/api/usuarios", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ nombre }),
    });
    const data = await res.json();
    alert(data.mensaje);
  }

  return (
    <form onSubmit={manejarEnvio} className="p-4 bg-light rounded">
      <input
        type="text"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Tu nombre"
        className="border p-2 rounded w-full mb-3"
      />
      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded">
        Enviar
      </button>
    </form>
  );
}
      

Y en tu API Route podrías tener algo así:

// app/api/usuarios/route.js
export async function POST(request) {
  const { nombre } = await request.json();
  return Response.json({ mensaje: `✅ Usuario ${nombre} creado con éxito` });
}
      

---

⚡ Uso de Axios — Librería más potente

Axios es una alternativa popular a fetch(), con una sintaxis más limpia, manejo automático de errores y soporte integrado para JSON.

Primero instala la librería:

npm install axios

Luego puedes importarla en tus componentes:

// app/posts/page.js
"use client";
import axios from "axios";
import { useEffect, useState } from "react";

export default function PostsPage() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts?_limit=5")
      .then(res => setPosts(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">📰 Últimos Posts</h1>
      {posts.map(p => (
        <div key={p.id} className="border p-3 rounded mb-2">
          <h4 className="font-bold">{p.title}</h4>
          <p>{p.body}</p>
        </div>
      ))}
    </main>
  );
}
      

🧩 Resultado visual:

📰 Últimos Posts

Título del Post

Contenido del artículo...

---

📘 Diferencias entre fetch y Axios

Característica	fetch()	Axios
Soporte nativo	✅ Sí	❌ Requiere instalación
Transformación JSON automática	❌ No	✅ Sí
Manejo de errores	Manual	Automático
Intercepción de peticiones	❌ No	✅ Sí

---

✅ Resumen

• 📡 fetch() es nativo, ideal para tareas simples.
• ⚡ Axios ofrece una sintaxis más potente y legible.
• 🧩 Ambas se pueden usar en el cliente o servidor dentro de Next.js.
• 🔄 Úsalas para conectar tu frontend con APIs externas o tus propias rutas API.

🚀 Saber manejar peticiones HTTP es clave para conectar tu app con datos reales.

← Volver al índice