Cliente HTTP en JavaScript: haciendo solicitudes correctamente de la A a la Z

Entrenador de Python en Línea para Principiantes

Aprende Python fácilmente sin sobrecargarte de teoría. Resuelve tareas prácticas con verificación automática, recibe pistas y escribe código directamente en el navegador, sin instalar nada.

Start Course

Cliente HTTP en JavaScript: haciendo solicitudes correctamente — de la A a la Z

En el desarrollo web moderno, la interacción con APIs externas y servidores es una tarea básica. Ya sea para obtener datos del clima, enviar un formulario o integrarse con una pasarela de pago, necesitarás un cliente HTTP. En este artículo, analizaremos cómo crear solicitudes HTTP en JavaScript (Node.js) correctamente: desde la elección de la herramienta hasta el manejo de errores y la optimización. Aprenderás a escribir código confiable y eficiente.

1. Elección de la herramienta: capacidades nativas vs bibliotecas

Node.js proporciona varias formas de realizar solicitudes HTTP. La elección depende de la complejidad de la tarea y las preferencias personales.

1.1. Módulo incorporado `http` / `https`

Este es el enfoque de más bajo nivel. Ofrece control total, pero requiere mucho código para solicitudes simples.

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. `fetch` global (desde Node.js 18+)

A partir de la versión 18, Node.js incluye fetch nativo, conocido en los navegadores. Es una API moderna y conveniente.

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`¡Error HTTP! estado: ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Error de fetch:', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. Bibliotecas populares: `axios`

axios es la biblioteca más popular para solicitudes HTTP. Ofrece una API conveniente, soporte de promesas, interceptores y análisis JSON automático.

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: 'Aprender clientes HTTP',      completed: false,      userId: 1    });    console.log('Creado:', response.data);    return response.data;  } catch (error) {    console.error('Error:', error.response?.data || error.message);  }}

createTodo();

Resumen: Para scripts simples, usa fetch. Para proyectos serios con muchas solicitudes e interceptores, usa axios. Deja el módulo http para casos específicos.

2. Tipos principales de solicitudes y trabajo con datos

Analicemos cómo enviar correctamente solicitudes GET, POST, PUT y DELETE con axios.

2.1. GET — obtener datos

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`No se pudo obtener el usuario ${id}: ${error.message}`);  }}

2.2. POST — crear un recurso

Enviamos datos en el cuerpo de la solicitud. Es importante especificar el tipo de contenido (Content-Type). Axios lo hace automáticamente para JSON.

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}