Consumo de APIs REST desde JavaScript (fetch / axios)

1 Introducción

El consumo de APIs REST desde JavaScript es una de las tareas más comunes en el desarrollo web y móvil.

• Frontend (navegador): aplicaciones web consultan APIs para mostrar datos dinámicos.
• Backend (Node.js): servicios intermedios consumen APIs de terceros (pagos, mapas, etc.).

👉 Para hacer estas solicitudes, en JavaScript se utilizan principalmente dos enfoques:

• fetch API (nativo en navegadores modernos y en Node.js desde la v18).
• axios (librería externa muy popular por su simplicidad).

2 Consumo de APIs con fetch

Características

• API nativa de JavaScript, basada en promesas, soporta async/await.
• Requiere manejo manual de errores y conversión a JSON.

Ejemplo 1 — GET con fetch

// Obtener un usuario
fetch("https://jsonplaceholder.typicode.com/users/1")
  .then(response => {
    if (!response.ok) {
      throw new Error("Error en la petición: " + response.status);
    }
    return response.json(); // Convertir a JSON
  })
  .then(data => {
    console.log("Usuario:", data);
  })
  .catch(error => {
    console.error("Hubo un problema:", error);
  });

👉 Flujo: petición → verificar estado → convertir a JSON → procesar datos.

Ejemplo 2 — POST con fetch

// Crear un nuevo post
fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Nuevo Post",
    body: "Contenido de ejemplo",
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => {
    console.log("Post creado:", data);
  })
  .catch(error => console.error("Error:", error));

👉 Importante: usar headers para indicar Content-Type: application/json.

Ejemplo 3 — Uso con async/await

async function obtenerUsuarios() {
  try {
    const resp = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!resp.ok) throw new Error("Error " + resp.status);
    const usuarios = await resp.json();
    console.log("Usuarios:", usuarios);
  } catch (err) {
    console.error("Hubo un problema:", err);
  }
}

obtenerUsuarios();

👉 Más legible que usar .then() encadenados.

3 Consumo de APIs con axios

Características

• Librería externa (instalar con npm install axios).
• Devuelve directamente los datos en response.data y maneja errores con más contexto.
• Funciona tanto en navegador como en Node.js.

Ejemplo 1 — GET con axios

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/users/1")
  .then(response => {
    console.log("Usuario:", response.data);
  })
  .catch(error => {
    console.error("Error:", error.message);
  });

👉 axios devuelve los datos directamente en response.data.

Ejemplo 2 — POST con axios

import axios from "axios";

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "Nuevo Post con Axios",
  body: "Contenido ejemplo",
  userId: 1
})
.then(response => {
  console.log("Post creado:", response.data);
})
.catch(error => {
  console.error("Error:", error.message);
});

👉 No es necesario hacer JSON.stringify(), axios lo maneja automáticamente.

Ejemplo 3 — Uso con async/await

import axios from "axios";

async function crearUsuario() {
  try {
    const resp = await axios.post("https://jsonplaceholder.typicode.com/users", {
      nombre: "Laura",
      email: "laura@ejemplo.com"
    });
    console.log("Usuario creado:", resp.data);
  } catch (err) {
    console.error("Error:", err.message);
  }
}

crearUsuario();

👉 Código más limpio y fácil de leer con async/await.

4 Envío de headers personalizados

Ejemplo con autenticación usando token Bearer:

Con fetch

fetch("https://api.ejemplo.com/pedidos", {
  headers: {
    "Authorization": "Bearer 12345",
    "Accept": "application/json"
  }
})
  .then(res => res.json())
  .then(data => console.log(data));

Con axios

import axios from "axios";

axios.get("https://api.ejemplo.com/pedidos", {
  headers: {
    Authorization: "Bearer 12345",
    Accept: "application/json"
  }
})
.then(res => console.log(res.data));

5 Manejo de errores

Con fetch (manual)

const resp = await fetch("https://api.ejemplo.com/datos");
if (!resp.ok) {
  throw new Error("Error en la petición: " + resp.status);
}

Con axios (automático)

try {
  const resp = await axios.get("https://api.ejemplo.com/datos");
} catch (err) {
  if (err.response) {
    console.error("Error:", err.response.status, err.response.data);
  }
}

👉 axios facilita la captura de códigos de error y respuestas JSON en errores.

6 ¿Cuándo usar fetch y cuándo axios?

fetch

• Ventaja: nativo, sin dependencias. Ideal para proyectos pequeños o si no se quieren librerías externas.
• Requiere más código para manejo de errores y JSON.

axios

• Ventaja: simple, poderoso y con mejor soporte de errores.
• Ideal para proyectos grandes o equipos que necesitan código más limpio. Soporta cancelación de requests, interceptores y transformación automática de datos.

7 Ejemplo práctico: Tabla de productos en una web

HTML

  
ID
Nombre
Precio

JS con fetch

async function cargarProductos() {
  const resp = await fetch("https://jsonplaceholder.typicode.com/posts");
  const productos = await resp.json();
  
  const tabla = document.getElementById("tablaProductos");
  productos.slice(0, 5).forEach(p => {
    const fila = `${p.id}${p.title}${(Math.random()*100).toFixed(2)}`;
    tabla.innerHTML += fila;
  });
}

cargarProductos();

👉 Resultado: la tabla HTML se llena automáticamente con datos de la API (JSONPlaceholder).

8 Conclusión del capítulo

fetch y axios son las principales formas de consumir APIs REST en JavaScript. Ambos permiten realizar operaciones GET, POST, PUT, PATCH, DELETE.

• fetch es nativo pero más verboso.
• axios es más simple y potente, recomendado en proyectos grandes.
• Es fundamental manejar headers, errores y respuestas JSON para un consumo correcto.

👉 En resumen: JavaScript convierte a las APIs REST en aplicaciones dinámicas y conectadas al mundo real.