🚀 EventSource、fetch流式读取……总有一款适合你
嘿，老朋友！上次咱们把FastAPI后端改造成了“水龙头”，AI一个字一个字往外蹦。然后我偷偷懒，说“前端代码网上大把”，结果后台好多小伙伴留言：“后端搞定了，前端死活接不上，救救我！”
明明后端打印得好好的，浏览器就是没反应；要么收到一堆乱码，要么连接一会儿就断。这感觉就像水龙头打开了，管子却是堵的。今天咱们就把这根“管子”彻底疏通，顺便把那些隐藏的“水垢”全清掉！
📡 前端接流三大主流方式
后端返回的是text/event-stream，也就是 Server-Sent Events (SSE)。前端接收它主要有三种姿势：
🔹 方式1：浏览器原生EventSource —— 最简单，但功能有限
🔹 方式2：fetch API + 流式读取 —— 更灵活，可自定义请求头
🔹 方式3：第三方库 @microsoft/fetch-event-source —— 全能选手，自动重连
🌰 方式1：EventSource —— 杀鸡用牛刀？够用就行！
如果你不需要自定义请求头（比如不需要带Token），EventSource是最快的接入方式。几行代码搞定：
const eventSource = new EventSource('http://localhost:8000/chat?prompt=你好');
eventSource.onmessage = (event) => {
if (event.data === '[DONE]') {
console.log('对话结束');
eventSource.close();
return;
}
// 把内容追加到页面
document.getElementById('output').innerText += event.data;
};
eventSource.onerror = (err) => {
console.error('连接出错', err);
eventSource.close();
};
注意：EventSource只能发送GET请求，且不能添加自定义Headers（比如Authorization）。 如果你需要POST携带复杂参数，就得用下面两种。
🌊 方式2：fetch + 流式读取 —— 真正的全栈式控制
fetch API 从 Chrome 95 开始完美支持流式响应。
如何让AI打字机效果在浏览器中流畅运行？
摘要：后端实现了流式输出，前端却不知道怎么接？本文详细讲解三种主流的前端接收方式：原生EventSource、fetch流式读取、微软fetch-event-source库，并对比优缺点。同时总结了前端最容易翻车的五个大坑（CORS、数据格式、重