🔥 前端也能玩转 AI 流式输出！从二进制流到打字机效果，一篇讲透

📌 前言 & 使用者痛点

痛点一：看到 ChatGPT 那种“打字机”效果。却不知道背后到底用了什么技术，导致在项目里复现时手足无措。

痛点二：大量文档只讲原理。却缺少一步步可运行的代码示例，初学者往往看不懂。

痛点三：在实际开发中。经常会碰到数据被截断、JSON 解析报错、流关闭不明确等坑，缺乏程序化的排查思路。

🎯 这篇文章适合谁

• ✅ 了解 Vue 基础的前端初学者
• ✅ 想接入 AI API 但不知道流式输出怎么处理的同学
• ✅ 听过 Stream、SSE 但不知道是啥的同学
• ❌ 已经很熟悉 ReadableStream 的大佬

📚 第一站：二进制流——水是怎么流动的

为什么数据是“流”？

You 在浏览器里看到的文字、图片、视频，在底层都是0 和 1 组成的二进制数据. 这些数据不是一次性全部到达，而是像水流一样。一小块一小块地流过来.

TextEncoder 与 TextDecoder

// 🔤 编码器：把字符串 → 二进制数组
const encoder = new TextEncoder;按理说，const bytes = encoder.encode;console.log，// Uint8Array
// 🔓 解码器：把二进制数组 → 字符串
const decoder = new TextDecoder;const str = decoder.decode;console.log，// "你好"

Uint8Array 是 JavaScript 中的一种类型化数组，只能存放 0~255 范围内的整数。按理说，

为什么要了解它？

Ai 服务端返回的数据*就是*这种 Uint8Array 二进制流。如果不认识它，后面的读取与解码过程将毫无头绪。

📚 第二站：ReadableStream——认识这根“水管”

什么是 ReadableStream？

ReadableStream 是浏览器原生提供的可读数据流 API，它代表一条可以逐块读取的数据通道。

基本使用方式

// fetch 返回一个包含 ReadableStream 的 response
const response = await fetch;按理说，console.log;// ReadableStream { locked: false,... }
// 从 stream 上获取读取器
const reader = response.body.getReader;

reader.read —— 拧开水龙头接水

// 每次 read 返回 { done: boolean。value: Uint8Array }
const { done,value } = await reader.read;// done === false → 还有数据，继续接
// done === true → 数据已读完
// value → 本次接到的一段二进制

📚 第三站：SSE 协议——水里加了什么“调料”

SSE 简介

SSE是一种服务器主动向浏览器推送文本数据的协议。

SSE 数据格式

再看data，{"id":"chatcmpl-xxx","choices":}
至于data，{"id":"chatcmpl-xxx"。"choices":}
data的观点是，{"id":"chatcmpl-xxx","choices":}
data这方面，

• 每条消息以 "data: " 开头；
• *换行符* 分隔不同消息；老实说，
• "data: "

🐞 第四站：Vue 实战——逐行拆解执行流程

项目初始化

npm create vite@latest stream-demo -- --template vue
cd stream-demo
npm install

1️⃣ 响应式状态准备

import { ref } from 'vue';const question = ref;// 使用者输入框
const content = ref;
// AI 回答显示区
const stream = ref;// 流式/普通模式开关
``
Pain Point：content定义为ref`。页面不会自动更新，而只能手动触发渲染。

2️⃣ 调用 AI 接口 
const update = async => {
if return;content.value = '思考中...';const endpoint = `${import.meta.env.VITE_MIMO_API_BASE_URL}/chat/completions`;const headers = {
Authorization: `Bearer ${import.meta.env.VITE_MIMO_API_KEY}`。'Content-Type': 'application/json',};说起来，const response = await fetch(endpoint,{
至于method，'POST',headers,body: JSON.stringify({
至于model。import.meta.env.VITE_MIMO_MODEL,messages:,stream: stream.value,// 👈 开启流式返回
}),});/* ---------- 流式处理开始 ---------- */
Pain Point：⚡️ 流式模式主要代码 
if {
content.value = '';// ===== 阶段 A：准备工具 =====
const reader = response.body.getReader;怎么说呢，// 获取读取器
const decoder = new TextDecoder;// UTF‑8 解码器
let done = false;let buffer = '';// ===== 阶段 B：循环读取 =====
while {
const { done: doneReading,value } = await reader.read;done = doneReading;不过，
// 把上一次残留 + 本次新块拼起来再解码
const chunkValue = buffer + decoder.decode;buffer = ''，// 按换行符切分并过滤出合法行
const lines = chunkValue.split
.filter);// ===== 阶段 C：逐行解析 =====
for {
const raw = line.replace.trim;if { // 收到结束标记
done = true;break，}
try {
const parsed = JSON.parse;const token = parsed.choices?.，.delta?.content，if {
content.value += token;// Vue 响应式自动更新页面
}
} catch {
// JSON 被截断 → 保存到 buffer 等下轮拼接
buffer += line + '
';}
}


}



Pain Point #1：`await reader.read` 会阻塞当前 async 函数，但不会卡死 UI；若忘记 `await` 则会得到未决 Promise，引发意外行为。老实说，


阶段细化演示

📦 第一次循环 – 正常两条 token


等待 reader.read → 收到第一块  

解码 decoder.decode → 'data:{...\"从\"}
从data来看，{...\"前\"}
' 

split & filter 得到两条合法行 

JSON.parse ➜ "从""前" 

追加 content.value += token → 页面显示 “从前”


📦 第二次循环 – 数据被截断


收到包含 "在" 完整行 + 截断半句 

完整行正常解析得到 "在" 并追加 

截断半句 JSON.parse 报错，被捕获后存入 buffer


📦 第三次循环 – 拼接修复


新块只剩下被截断部分 "山"}]}
" 

buffer + newChunk 恢复为完整 JSON 行 

成功解析得到 "山" 并追加 


📦 第四次循环 –  标记


最终一块返回  且 doneReading=true 

循环退出。最终内容 “从前在山”



完整执行流程图


使用者点击提交 ──► fetch POST
│ │
▼ ▼
AI Server 按 token 推送 SSE ──► response.body
│ │ getReader
▼ ▼
while { │
await reader.read ──► Uint8Array chunk
decode │→ string 如 "data:{...}"
split & filter │→ lines
for each line:
strip "data:" →
if "" break →
try JSON.parse →
extract token →
content += token
catch → buffer += line ← 下轮拼接修复}
}



常见坑 & 对策



痛点
描述
推荐方法




变量名冲突
reader.read 返回 {done,value} 与外层控制变量同名
使用解构重命名 {done: doneReading,value}


JSON 被截断
网络分片导致单条 SSE 消息跨块出现
用 buffer 暂存残余，在下一轮拼接后再解析


中文字符乱码
未传 {stream:true} 时中文被切割成非法字符
始终使用 decoder.decode


API Key 泄露
将密钥硬编码在前端源码中
使用 .env.local 并以 VITE_ 前缀暴露，仅供本地调试；老实说，生产环境建议走后端代理


 未及时捕获
某些实现只依赖 reader.doneReading 导致最终一句未渲染
同时监听 doneReading && line==="" 双重退出条件





页面模板



输入：

提交 🚀

Streaming






{{ content }}




正在思考...