实现流式交互

你需要掌握的方法

流式返回应支持用户取消，并在途中断开时显示状态。部分输出尚未经过完整校验，不能立即作为最终结构化结果保存。保留一个完整响应作为对照。

把方法放进场景

目标：用 AI 完成一个边界明确的工作任务。
输入：你可以公开且与任务相关的材料。
验收：结果可核查；未知内容被明确标记。

操作工作坊

理解流式读取与取消，避免把半截输出当作完整结果。

1. 根据具体模型接口确认流式事件格式。
2. 在浏览器逐段读取响应；事件数据与传输字节分开处理。
3. 模拟中断，确认显示状态与取消后不继续保存。

const controller = new AbortController();
const response = await fetch("/your-stream-endpoint", { signal: controller.signal });
if (!response.ok || !response.body) throw new Error("Stream unavailable");
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  buffer += decoder.decode(value, { stream: true });
  // 按接口声明的 SSE / JSON 事件协议解析 buffer，不能直接猜字段。
}
// 用户取消时调用 controller.abort()。

如何验收

正常完成、用户取消和服务端断开各验证一次，分别记录完成状态。示例的 endpoint 需替换为你实际实现的接口。

本单元实践

选择一个与你工作相关的案例，实践“实现流式交互”。提交输入、过程、结果和核查记录。

• 能说明任务目标和输入
• 有实际操作结果或可运行成果
• 能指出错误、限制和验证依据