JavaScript Academy · Lección

Respuestas de fetch en streaming

Procese respuestas grandes a medida que llegan.

Respuestas de fetch en streaming es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 4 lecciones en total.

Las respuestas son streams

Un Response de fetch expone su cuerpo como un ReadableStream mediante response.body. En lugar de esperar a recibir toda la carga útil, puede procesar los bytes a medida que llegan.

const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array

Leer el stream del cuerpo

response.body proporciona fragmentos de Uint8Array. Obtenga un reader y repita el proceso igual que con cualquier stream legible.

const reader = res.body.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("received", value.length, "bytes");
}

Seguir el progreso de la descarga

Combine la cabecera Content-Length con los bytes recibidos para mostrar una barra de progreso.

const total = +res.headers.get("Content-Length");
let loaded = 0;
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  loaded += value.length;
  console.log(Math.round((loaded / total) * 100) + "%");
}

Decodificar bytes como texto

Utilice TextDecoder para convertir los fragmentos de bytes en cadenas. Pase { stream: true } para que los caracteres multibyte divididos entre fragmentos se decodifiquen correctamente.

const decoder = new TextDecoder();
let text = "";
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  text += decoder.decode(value, { stream: true });
}

Utilizar TextDecoderStream

Una opción aún más sencilla es canalizar el stream de bytes mediante un TextDecoderStream para obtener directamente un stream de cadenas.

const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
  console.log(chunk);
}

Analizar NDJSON

NDJSON delimitado por saltos de línea transmite un objeto por línea. Almacene el texto en un búfer y emita las líneas completas a medida que se formen.

let buffer = "";
for await (const chunk of textStream) {
  buffer += chunk;
  let nl;
  while ((nl = buffer.indexOf("\n")) >= 0) {
    const line = buffer.slice(0, nl);
    buffer = buffer.slice(nl + 1);
    if (line) console.log(JSON.parse(line));
  }
}

Tokens de LLM en streaming

Este patrón impulsa los chats de IA en streaming: cada fragmento es un token o evento que se muestra en cuanto llega para crear un efecto de escritura en tiempo real.

Cancelar un stream de fetch

Pase una AbortSignal a fetch y llame a controller.abort() para detener limpiamente un stream largo.

const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();

Gestionar errores de streams

Los fallos de red que se producen durante el stream hacen que la promesa de read() se rechace. Envuelva el bucle en un bloque try/catch para gestionar las interrupciones.

try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
  }
} catch (err) {
  console.log("stream interrupted", err);
}

Cuándo no utilizar streaming

Para respuestas pequeñas, res.json() o res.text() es más sencillo. Utilice streaming cuando las cargas útiles sean grandes, progresivas o ilimitadas.

El cuerpo de la respuesta solo se puede usar una vez

Solo puede leer response.body una vez. Llame a res.clone() antes de leerlo si necesita hacerlo dos veces (por ejemplo, para almacenarlo en caché).

const copy = res.clone();
await res.body.getReader().read();
// copy still readable

Comprobación rápida

Pruebe el streaming de fetch.

Repaso: fetch en streaming

Lea response.body fragmento a fragmento, siguió el progreso, decodificó bytes con TextDecoder/TextDecoderStream, analizó NDJSON, canceló con AbortController y gestionó los errores. A continuación: transform streams.

Preguntas frecuentes

¿La lección «Respuestas de fetch en streaming» es gratis?

Sí — el texto completo de «Respuestas de fetch en streaming» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Respuestas de fetch en streaming»?

Procese respuestas grandes a medida que llegan. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar JavaScript Academy?

No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Respuestas de fetch en streaming»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?

Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a JavaScript Academy