JavaScript Academy · 课时

可读流

Q: 「可读流」这节课中我会学到什么？

逐块读取数据。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

逐块读取数据。

可读流 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

什么是流

流接口会随着数据块到达而逐步处理数据，而不是将所有数据一次性加载到内存中。这使您能够高效地处理超大下载、视频和实时数据流。

ReadableStream

ReadableStream 是一种可以逐个 read 数据块的数据源。浏览器会在 fetch 响应、文件数据块等对象上提供它。

创建流

使用一个底层来源对象构造它，该对象的 start(controller) 会将数据块加入队列并发出完成信号。

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue("chunk 1");
    controller.enqueue("chunk 2");
    controller.close();
  }
});

获取读取器

getReader() 会锁定 stream 并返回一个 reader。锁定期间，其他使用方无法读取它。

const reader = stream.getReader();

读取数据块

reader.read() 会返回一个承诺对象，该对象解析为 { value, done }。当 stream 耗尽时，done 会变为 true。

const { value, done } = await reader.read();
console.log(value, done);

读取循环

持续调用 read()，直到 done 为 true，以消费完整的 stream。

const reader = stream.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("got", value);
}

释放锁

调用 reader.releaseLock() 解锁 stream，这样其他 reader 就可以接管。

reader.releaseLock();

拉取方法

底层来源可以定义 pull(controller)。当使用方需要更多数据时会调用它，从而支持延迟生成和按需生成。

let i = 0;
new ReadableStream({
  pull(controller) {
    controller.enqueue(i++);
    if (i > 5) controller.close();
  }
});

异步迭代

在现代环境中，ReadableStream 支持异步迭代，因此您可以使用 for await...of，而不必手动编写循环。

for await (const chunk of stream) {
  console.log(chunk);
}

取消流

reader.cancel(reason) 会提前停止 stream 并释放资源，这对于中止大型下载非常重要。

await reader.cancel("user navigated away");

Tee：拆分流

tee() 会返回两个 stream，并向每个 stream 发送每个数据块的副本，适合读取数据两次（例如分别用于缓存和显示）。

const [a, b] = stream.tee();
// read a and b independently

快速检查

测试可读流。

回顾：可读流

您创建了 ReadableStream，获取了 reader，在循环中使用 read() 消费了数据块，释放了锁，使用 pull 实现了延迟数据生成，使用 for await 进行了迭代，并使用 tee() 拆分了 stream。下一步：流式读取获取响应。

常见问题解答

「可读流」课时是免费的吗？

是的 — 「可读流」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「可读流」这节课中我会学到什么？

逐块读取数据。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「可读流」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy