流式处理 Fetch 响应
在大型响应到达时逐步处理。
流式处理 Fetch 响应 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
响应就是流
fetch 的 Response 会通过 response.body 将响应体公开为 ReadableStream。您不必等待完整的有效载荷到达，而是可以在字节到达时逐个处理它们。
const res = await fetch("/big-file");
const stream = res.body; // ReadableStream of Uint8Array读取响应体流
response.body 会生成 Uint8Array 数据块。获取 reader，然后像读取其他可读流一样循环读取。
const reader = res.body.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("received", value.length, "bytes");
}跟踪下载进度
将 Content-Length 标头与已接收的字节数结合起来，即可显示进度条。
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) + "%");
}将字节解码为文本
使用 TextDecoder 将字节数据块转换为字符串。传入 { stream: true }，这样分布在不同数据块中的多字节字符才能正确解码。
const decoder = new TextDecoder();
let text = "";
while (true) {
const { value, done } = await reader.read();
if (done) break;
text += decoder.decode(value, { stream: true });
}使用 TextDecoderStream
更简单的做法是：让字节流通过 TextDecoderStream，直接获得字符串流。
const textStream = res.body.pipeThrough(new TextDecoderStream());
for await (const chunk of textStream) {
console.log(chunk);
}解析 NDJSON
按换行分隔的 JSON 流会为每行提供一个对象。请缓存文本，并在完整行形成后将其输出。
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));
}
}流式读取 LLM 标记
流式人工智能聊天正是使用这种模式：每个数据块都是一个标记或事件，在到达的瞬间就被渲染出来，从而产生实时打字效果。
中止获取流
将 AbortSignal 传递给 fetch，然后调用 controller.abort()，即可干净地停止长时间运行的 stream。
const controller = new AbortController();
fetch("/stream", { signal: controller.signal });
// later:
controller.abort();处理流错误
stream 传输过程中发生网络故障时，read() 的承诺对象会被拒绝。请将循环放在 try/catch 中，以处理传输中断。
try {
while (true) {
const { value, done } = await reader.read();
if (done) break;
}
} catch (err) {
console.log("stream interrupted", err);
}何时不应使用流
对于较小的响应，res.json() 或 res.text() 更简单。当有效载荷很大、需要渐进处理或大小不受限时，再使用流式处理。
响应体只能使用一次
您只能读取一次 response.body。如果需要读取两次（例如为了缓存），请在读取前调用 res.clone()。
const copy = res.clone();
await res.body.getReader().read();
// copy still readable快速检查
测试获取流式处理。
回顾：流式获取
您逐个读取了 response.body 的数据块，跟踪了进度，使用 TextDecoder/TextDecoderStream 解码了字节，解析了 NDJSON，使用 AbortController 中止了操作，并处理了错误。下一步：转换流。
常见问题解答
「流式处理 Fetch 响应」课时是免费的吗？
是的 — 「流式处理 Fetch 响应」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「流式处理 Fetch 响应」这节课中我会学到什么？
在大型响应到达时逐步处理。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「流式处理 Fetch 响应」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。