Streams legibles
Consuma datos por fragmentos.
Streams legibles es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 1 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.
¿Qué son los streams?
La Streams API procesa los datos de forma incremental a medida que llegan los fragmentos, en lugar de cargarlo todo en memoria. Esto permite gestionar de manera eficiente descargas enormes, vídeo y fuentes de datos en tiempo real.
El ReadableStream
Un ReadableStream es una fuente de la que se lee fragmento a fragmento. Los navegadores los exponen en las respuestas de fetch, los blobs de archivos y otros recursos.
Crear un stream
Construya uno con un objeto de fuente subyacente cuyo start(controller) ponga fragmentos en cola e indique que se ha completado.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Obtener un reader
getReader() bloquea el stream y devuelve un reader. Mientras está bloqueado, ningún otro consumidor puede leerlo.
const reader = stream.getReader();Leer fragmentos
reader.read() devuelve una promesa que se resuelve en { value, done }. done pasa a ser true cuando el stream se ha agotado.
const { value, done } = await reader.read();
console.log(value, done);El bucle de lectura
Repita read() hasta que done sea true para consumir todo el stream.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Liberar el bloqueo
Llame a reader.releaseLock() para desbloquear el stream y permitir que otro reader lo tome.
reader.releaseLock();El método pull
Una fuente subyacente puede definir pull(controller), que se llama cuando el consumidor necesita más datos, lo que permite generarlos de forma diferida y bajo demanda.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Iteración asíncrona
En los entornos modernos, un ReadableStream admite la iteración asíncrona, por lo que puede utilizar for await...of en lugar de un bucle manual.
for await (const chunk of stream) {
console.log(chunk);
}Cancelar un stream
reader.cancel(reason) detiene el stream antes de tiempo y libera recursos, algo importante para cancelar descargas grandes.
await reader.cancel("user navigated away");Tee: dividir un stream
tee() devuelve dos streams que reciben una copia de cada fragmento, lo que resulta útil para leer los datos dos veces (por ejemplo, para almacenarlos en caché y mostrarlos).
const [a, b] = stream.tee();
// read a and b independentlyComprobación rápida
Pruebe los streams legibles.
Repaso: streams legibles
Creó un ReadableStream, obtuvo un reader, consumió fragmentos con read() en un bucle, liberó el bloqueo, utilizó pull para obtener datos de forma diferida, iteró con for await y dividió el stream con tee(). A continuación: respuestas de fetch en streaming.
Preguntas frecuentes
¿La lección «Streams legibles» es gratis?
Sí — el texto completo de «Streams legibles» 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 «Streams legibles»?
Consuma datos por fragmentos. 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 1 de 4.
¿Cuánto tiempo toma la lección «Streams legibles»?
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
- Streams legibles
- Respuestas de fetch en streaming
- Streams de transformación
- Contrapresión y canalización