Integrar LLMs con Async y Abort Controller

Contenido del curso

Event Loop and Execution Model

Callbacks

Promesas

Async/Await Javascript Moderno

Casos reales de uso de asincronismo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:41

Integrar LLMs con Async y Abort Controller

Curso de Asincronismo con Javascript

Clase 17 de 18

Clase 17 / 18

Recursos

Comunicarte con un modelo de inteligencia artificial desde tu aplicación no funciona igual que consultar una base de datos tradicional. Mientras un servidor convencional responde en milisegundos con datos estáticos, un modelo de lenguaje grande (LLM) genera su respuesta token por token, introduciendo una latencia variable e impredecible que puede arruinar la experiencia de usuario si la tratas como una llamada HTTP cualquiera.

¿Cómo se estructura una petición POST hacia un LLM?

Para comunicarte con estos modelos se utiliza la API Fetch con el método POST [0:22], pero el cuerpo de la petición exige una estructura mucho más estricta que una solicitud común. Imagina que estás haciendo una orden en un restaurante de alta cocina:

La URL es la dirección del local.
Los headers con tu API key son tu tarjeta de membresía exclusiva.
El body es donde defines exactamente qué necesitas.

Dentro del body debes especificar dos elementos fundamentales: el model, que indica qué "chef" procesará tu solicitud, y un arreglo de mensajes que funciona como la comanda detallada [0:48]. Este arreglo utiliza roles específicos: el rol system define las instrucciones de comportamiento del modelo, y el rol user contiene la pregunta actual del usuario.

¿Por qué la asincronía es crítica al trabajar con IA?

Un usuario promedio percibe una aplicación como rota si no ve actividad en tres segundos [1:07]. Una IA compleja puede tardar mucho más en responder, por lo que no puedes bloquear la interfaz esperando al servidor.

Aquí entran Async y Await como mecanismos esenciales para mantener la fluidez de la aplicación. Pero no basta con esperar: necesitas también poder cancelar peticiones cuando sea necesario.

¿Qué es el Abort Controller y cómo protege tu aplicación?

El Abort Controller [1:22] actúa como un botón de emergencia que te permite cortar la conexión en dos escenarios clave:

La petición excede un tiempo límite establecido.
El usuario decide cancelar la operación manualmente.

Sin este mecanismo, tu aplicación podría quedarse esperando eternamente una respuesta que quizás nunca llegue.

¿Cómo manejar la respuesta JSON de un LLM de forma segura?

Cuando la respuesta finalmente llega, el trabajo no ha terminado. Los LLM devuelven objetos JSON profundamente anidados y propensos a cambios [1:42]. Para extraer el texto generado, necesitas recorrer propiedades como choices, message y content.

Si intentas acceder directamente a una propiedad que no existe debido a un error del modelo, tu aplicación colapsará. La solución profesional es aplicar programación defensiva mediante el encadenamiento opcional (optional chaining) [1:57]:

javascript const respuesta = data?.choices?.[0]?.message?.content;

Esta sintaxis funciona como un seguro: si algún eslabón de la cadena falta, obtienes undefined de forma controlada en lugar de un error fatal en tiempo de ejecución.

¿Cómo ahorrar dinero y tiempo con funciones mock durante el desarrollo?

Cada llamada a la API real cuesta dinero y tiempo [2:15]. Un consejo pragmático es crear funciones mock o simuladas durante el desarrollo. Se trata de una función que retorna una Promise resuelta tras un setTimeout, con datos falsos que imitan la estructura real:

javascript function mockLLMResponse() { return new Promise((resolve) => { setTimeout(() => { resolve({ choices: [{ message: { content: "Respuesta simulada" } }] }); }, 1500); }); }

Esto te permite perfeccionar tres aspectos sin gastar recursos reales:

Estados de carga visibles para el usuario.
Manejo de errores ante fallos inesperados.
Diseño de interfaz con datos representativos.

Reserva las llamadas reales únicamente para la integración final.

Integrar inteligencia artificial en tu aplicación va más allá de enviar datos: es gestionar la incertidumbre del tiempo y la estructura de las respuestas. La asincronía mantiene viva la conversación entre el usuario y la máquina mientras el procesamiento pesado ocurre en segundo plano. Sin ella, la inteligencia de tu app se sentiría como una pantalla congelada. Si te queda alguna duda sobre cómo implementar estos patrones, compártela en los comentarios.

Resumen

¿Cómo se estructura una petición POST hacia un LLM?

La URL es la dirección del local.
Los headers con tu API key son tu tarjeta de membresía exclusiva.
El body es donde defines exactamente qué necesitas.

¿Por qué la asincronía es crítica al trabajar con IA?

Aquí entran Async y Await como mecanismos esenciales para mantener la fluidez de la aplicación. Pero no basta con esperar: necesitas también poder cancelar peticiones cuando sea necesario.

¿Qué es el Abort Controller y cómo protege tu aplicación?

El Abort Controller [1:22] actúa como un botón de emergencia que te permite cortar la conexión en dos escenarios clave:

La petición excede un tiempo límite establecido.
El usuario decide cancelar la operación manualmente.

Sin este mecanismo, tu aplicación podría quedarse esperando eternamente una respuesta que quizás nunca llegue.

¿Cómo manejar la respuesta JSON de un LLM de forma segura?

javascript const respuesta = data?.choices?.[0]?.message?.content;

Esta sintaxis funciona como un seguro: si algún eslabón de la cadena falta, obtienes undefined de forma controlada en lugar de un error fatal en tiempo de ejecución.

¿Cómo ahorrar dinero y tiempo con funciones mock durante el desarrollo?

javascript function mockLLMResponse() { return new Promise((resolve) => { setTimeout(() => { resolve({ choices: [{ message: { content: "Respuesta simulada" } }] }); }, 1500); }); }

Esto te permite perfeccionar tres aspectos sin gastar recursos reales:

Estados de carga visibles para el usuario.
Manejo de errores ante fallos inesperados.
Diseño de interfaz con datos representativos.

Reserva las llamadas reales únicamente para la integración final.

Event Loop and Execution Model

Quien domina el Asincronismo domina JS

Microtasks vs Macrotasks

Callbacks

Higher-Order Functions y el patrón Callback

Convenciones Error-First y Node.js

Callback Hell: La Pirámide del Destino

Promesas

El ciclo de vida de una Promesa

Consumiendo y encadenando Promesas

Manejo de errores y rechazos

Combinadores de Promesas

Async/Await Javascript Moderno

La función async y la palabra clave await

Manejo de errores con try/catch en funciones async

Patrones de ejecución: secuencial vs paralelo

Refactorizando Promise chains a async/await

Casos reales de uso de asincronismo

Presentacion Proyecto

Fetch API: cómo validar respuestas con response.ok

Archivos del proyecto

Integrar LLMs con Async y Abort Controller

integracion con LLMs

Integrar LLMs con Async y Abort Controller

Progreso del curso

Event Loop and Execution Model

Callbacks

Promesas

Async/Await Javascript Moderno

Casos reales de uso de asincronismo

Recursos

Recursos