Cómo consumir el REST API desde JavaScript

Introducción

El consumo de un REST API desde JavaScript es una habilidad fundamental para cualquier desarrollador web moderno. En este artículo, presentaremos una guía detallada y práctica, abarcando desde los conceptos básicos de REST hasta ejemplos reales de petición y respuesta en el navegador y en Node.js.

¿Qué es REST

REST (Representational State Transfer) es un estilo arquitectónico para la comunicación entre sistemas distribuidos. Se basa en:

• Recursos: Entidades identificables por URI.
• Métodos HTTP: GET, POST, PUT, DELETE, PATCH.
• Representaciones: JSON, XML u otros formatos.
• Estado sin sesión: Cada petición es independiente.

Para profundizar, visita RESTful API Tutorial y la documentación de MDN sobre REST.

1. Preparando el entorno

Antes de enviar peticiones, asegúrate de tener un entorno básico:

• Un editor de código (VS Code, Sublime, etc.).
• Un navegador moderno (Chrome, Firefox, Edge).
• Node.js instalado si deseas realizar llamadas desde el backend.

2. Métodos HTTP y uso básico con fetch

2.1 GET

fetch(https://api.ejemplo.com/items)
  .then(response =gt response.json())
  .then(data =gt console.log(data))
  .catch(error =gt console.error(Error:, error))

2.2 POST

fetch(https://api.ejemplo.com/items, {
  method: POST,
  headers: { Content-Type: application/json },
  body: JSON.stringify({ nombre: Nuevo Item, cantidad: 10 })
})
  .then(response =gt response.json())
  .then(data =gt console.log(data))
  .catch(error =gt console.error(Error:, error))

3. Manejo de errores y estado de la respuesta

Es esencial comprobar el status code antes de procesar la respuesta:

fetch(https://api.ejemplo.com/items/123)
  .then(response =gt {
    if (!response.ok) {
      throw new Error(HTTP error! status: {response.status})
    }
    return response.json()
  })
  .then(data =gt console.log(data))
  .catch(error =gt console.error(Fetch Error:, error))

4. Alternativa: Axios

Axios es una librería basada en promesas que simplifica las peticiones HTTP.

Ejemplo básico con axios en Node.js o navegador:

axios.get(https://api.ejemplo.com/items)
  .then(response =gt console.log(response.data))
  .catch(error =gt console.error(Axios Error:, error))

Más información en la documentación oficial de Axios.

5. Autenticación y autorización

Las APIs seguras requieren tokens o credenciales. Los mecanismos más comunes son:

• API Key: Se envía en cabecera o parámetro.
• Bearer Token (JWT): Cabecera Authorization: Bearer lttokengt.
• OAuth 2.0: Flujo de autorización más complejo.

Ejemplo con JWT:

fetch(https://api.ejemplo.com/secure-data, {
  headers: {
    Authorization: Bearer tu_token_jwt,
    Content-Type: application/json
  }
})
  .then(res =gt res.json())
  .then(data =gt console.log(data))
  .catch(err =gt console.error(err))

6. Consideraciones sobre CORS

El navegador impone Cross-Origin Resource Sharing. Si la API y tu frontend están en dominios distintos, el servidor debe incluir cabeceras:

• Access-Control-Allow-Origin: o dominio específico.
• Access-Control-Allow-Methods: GET, POST, ...

Revisa la sección de CORS en la documentación MDN.

7. Buenas prácticas

• Mantén la lógica de API en un módulo separado.
• Maneja errores de forma centralizada.
• Implementa timeouts y reintentos.
• Sanitiza y valida datos antes de enviarlos.
• Utiliza variables de entorno para URLs y tokens.

8. Ejemplo completo en Node.js

// Requiere instalación: npm install node-fetch
const fetch = require(node-fetch)
const API_URL = https://api.ejemplo.com/items

async function obtenerItems() {
  try {
    const res = await fetch(API_URL)
    if (!res.ok) throw new Error(Error HTTP: {res.status})
    const data = await res.json()
    console.log(data)
  } catch (error) {
    console.error(Error al obtener items:, error)
  }
}

async function crearItem(item) {
  try {
    const res = await fetch(API_URL, {
      method: POST,
      headers: { Content-Type: application/json },
      body: JSON.stringify(item)
    })
    if (!res.ok) throw new Error(Error HTTP: {res.status})
    return await res.json()
  } catch (error) {
    console.error(Error al crear item:, error)
  }
}

// Uso
obtenerItems()
crearItem({ nombre: Prueba, cantidad: 5 })

Conclusión

Consumir un REST API desde JavaScript es sencillo en apariencia, pero requiere atención a detalles como el manejo de errores, seguridad y eficiencia. Ya sea utilizando fetch o librerías como Axios, aplicar buenas prácticas garantizará aplicaciones robustas y mantenibles.

Recursos adicionales

• API Fetch – MDN
• Documentación de Axios
• RESTful API Best Practices