Documentación: Módulo de Peticiones HTTP

Este documento describe un sistema de dos partes diseñado para configurar y ejecutar peticiones HTTP. Está compuesto por un componente web visual (<http-request-config>) y una clase lógica (HttpRequestExecutor).

1. Resumen y Caso de Uso: ¿Para qué sirve este código?

Para responder directamente a tu pregunta: este código sirve para ambas cosas: guardar la configuración de una petición Y para ejecutarla (hacer tests).

Imagina que estás construyendo una herramienta como Postman o Insomnia. Necesitas dos cosas fundamentales:

1. Una Interfaz de Usuario (UI): Un formulario donde el usuario pueda definir todos los detalles de una petición HTTP: la URL, el método (GET, POST), los headers, los parámetros, el tipo de autenticación y el cuerpo (body) de la petición.
2. Un Motor de Ejecución: Una vez que el usuario ha definido la petición, necesitas un “motor” que tome esa configuración y la envíe de verdad a un servidor para obtener una respuesta.

Este código te proporciona ambas piezas:

• <http-request-config> (El Componente Visual): Es la interfaz de usuario. Su propósito es permitir a un usuario crear o modificar la configuración de una petición de forma visual y amigable. Cuando el usuario termina, puedes obtener un objeto JavaScript (RequestConfig) que contiene toda esa información.

• HttpRequestExecutor (La Lógica de Ejecución): Es el motor. Su trabajo es tomar el objeto RequestConfig (generado por el componente o creado manualmente) y realizar la petición HTTP real. Devuelve una respuesta estructurada con el estado, los datos, la duración, etc.

Flujo de Trabajo Típico:

1. Configurar: Muestras el componente <http-request-config> en tu aplicación. El usuario rellena los campos.
2. Obtener Configuración: Cuando el usuario hace clic en un botón “Enviar” o “Guardar” en tu aplicación, llamas al método .getVal() del componente para obtener el objeto RequestConfig.
3. Decidir qué hacer:
   • Para Probar/Ejecutar: Creas una instancia de HttpRequestExecutor, le pasas el objeto RequestConfig y llamas a .execute(). Muestras la respuesta al usuario.
   • Para Guardar: Tomas el objeto RequestConfig, lo conviertes a una cadena JSON (JSON.stringify(config)) y lo guardas en donde necesites (localStorage, una base de datos, un archivo). Más tarde, puedes cargar esa configuración, pasarla al componente con .setVal() para que el usuario la vea o la edite, y volver a ejecutarla.

2. Interfaces de Datos Compartidas

Estas son las estructuras de datos (objetos) que utilizan tanto el componente como el ejecutor.

KeyValue

Describe un par clave-valor, usado para headers y parámetros.

AuthConfig

Describe la configuración de autenticación.

RequestConfig

El objeto principal que define una petición HTTP completa.

RequestResponse

El objeto que devuelve HttpRequestExecutor tras ejecutar una petición.

3. Componente: <http-request-config>

Un componente web (basado en Lit) que proporciona una interfaz de usuario para construir un objeto RequestConfig.

Uso Básico

<!-- En tu HTML -->
<http-request-config id="request-builder"></http-request-config>

<script>
  // En tu JavaScript
  const builder = document.getElementById('request-builder');

  // Escuchar cambios en la configuración
  builder.addEventListener('config-change', (event) => {
    console.log('La configuración ha cambiado:', event.detail);
  });

  // Para obtener la configuración actual
  const currentConfig = builder.getVal();

  // Para establecer una configuración desde código
  const myConfig = { /* ... un objeto RequestConfig ... */ };
  builder.setVal(myConfig);
</script>

Propiedades (Properties)

Métodos Públicos

Eventos

Características de la Interfaz

• Pestañas (Tabs): Organización clara para Parámetros, Headers, Auth y Body.
• Editor Clave-Valor: Permite añadir, eliminar y activar/desactivar Headers y Parámetros fácilmente.
• Manejo de Autenticación: Soporta Bearer Token y Basic Auth con campos dedicados.
• Visibilidad de Datos Sensibles: Un botón con un icono de ojo (👁️/🙈) para ocultar o mostrar contraseñas y tokens.
• Cuerpo Inteligente: La pestaña Body se deshabilita para métodos como GET que no lo soportan.
• Tema Claro/Oscuro: Incluye un botón para alternar el tema y también respeta la configuración del sistema operativo.

4. Clase: HttpRequestExecutor

Una clase de JavaScript/TypeScript pura y sin dependencias externas (salvo la API fetch nativa) que ejecuta peticiones HTTP a partir de un objeto RequestConfig.

Uso Básico

import { HttpRequestExecutor } from './http-request-executor.js';

// 1. Obtén o crea un objeto de configuración
const config = {
  name: 'Get User Data',
  url: 'https://jsonplaceholder.typicode.com/users/1',
  method: 'GET',
  headers: [],
  params: [],
  body: '',
  bodyType: 'json',
  auth: { type: 'none' }
};

// 2. Crea una instancia del ejecutor
const executor = new HttpRequestExecutor();

// 3. Ejecuta la petición
async function runRequest() {
  console.log('Enviando petición...');
  const response = await executor.execute(config);

  if (response.success) {
    console.log('Respuesta recibida:', response.status, response.statusText);
    console.log('Datos:', response.data);
  } else {
    console.error('Error en la petición:', response.error);
  }
  console.log(`Duración: ${response.duration}ms, Tamaño: ${response.size} bytes`);
}

runRequest();

Métodos Principales

Funciones de Ayuda (Helpers)

Características Clave

• Construcción Automática: Genera la URL final con parámetros, añade los headers de autenticación y formatea el cuerpo de la petición según bodyType.
• Manejo de Content-Type: Añade el Content-Type correcto para JSON, Texto, etc., si no ha sido especificado por el usuario en los headers.
• Parsing Inteligente de Respuesta: Intenta convertir la respuesta a JSON si el Content-Type es application/json, a texto para otros tipos, o a Blob para binarios.
• Manejo de Errores Robusto: Captura errores de red (ej. DNS no encontrado) y de timeout, devolviendo un objeto RequestResponse con success: false y un mensaje de error.
• Métricas de Rendimiento: Calcula y devuelve automáticamente la duración de la petición y el tamaño de la respuesta.