前言

在建立 AI 聊天应用时最主要的交互体验就是“打字机效果”——文字一字一字实时弹出，让使用者感受到即时反馈。从中你可能遇到来看，

• 使用axios请求时页面几乎无响应。等了很久才看到完整内容，
• 用fetch一样是一次性获取全部响应，无法实现逐步渲染。
• 想要真正实现流式输出，却不知道哪种工具最合适。

这篇文章从流式输出角度，程序对比四种主流方式：普通fetchfetch 流式axios还有SSE帮你快速定位痛点并选型。

一、先说一张表看懂全部区别

*简化版表格仅展示关键差异；完整细节请参见后文对应章节。*

二、普通 Fetch：看起来像流式，其实不是

javascript // ❌ 这不是流式！这是一次性接收 const response = await fetch;其实，const data = await response.text;话说回来，// 阻塞直到全部数据到达 console.log;// 一次性打印完整内容

工作流程：

• 发起请求 → 等待服务器完整响应 → 一次性解析 → 返回数据。其实，
• - 的每一步都必须完成后才能进入接下来。导致 UI 阻塞，
• - 均不支持边读取边处理。
• 所有数据已存入内存，若文件过大易溢出。老实说，
.
• 不自动重连；需要手动重新发起请求，
.
• 支持 GET/POST 等方法，但不支持自定义 Header 的跨域请求除非 CORS 配置正确。其实，
.
• 协议层面为 HTTP；只要网络正常就可以使用，无需额外配置。
.
• 内存使用取决于完整响应大小；其实，大文件会导致浏览器卡顿甚至崩溃。`.
• <=== <=== <=== <=== <=== <=== <=== <===>>>> ​. .

*适用场景*：- 普通 REST API 调用 - 数据量小且无需实时反馈的接口。​.

三、Fetch 流式：真正的流式输出王者

这才是实现 ChatGPT 打字机效果的正确姿势！下面给出主要原理与代码示例。​.

主要原理

• 服务端开启 HTTP Chunked 编码。将数据切分成多个独立的数据块，逐个发送。话说回来，

• 浏览器拿到响应后通过 `response.body` 暴露为 `ReadableStream` 可读流。• 前端通过读取器逐块读取数据，并即时渲染到页面实现打字机效果。至于**注**，若服务端未开启 Chunked 或者返回的是固定长度 Content‑Length。则无法使用此模式，需要改造后端或退回普通 Fetch。
**代码示例** javascript async function streamFetch { const response = await fetch;if throw new Error;const reader = response.body.getReader;const decoder = new TextDecoder;try { while { const { done,value } = await reader.read;if break，
 // 解码当前块并拼接到页面
const chunkText = decoder.decode;
console.log，document.getElementById.textContent += chunkText;怎么说呢，}
} finally { reader.releaseLock;按理说，// 防止内存泄漏 } } **关键点说明**

适用场景

• Ai 大模型实时回复 – 打字机风格体验；​.
.
• Django/Node 等服务端已启用 Chunked 的大文件下载或日志推送；​.
.
• Dynamically 更新超大 JSON 或 CSV 时可避免浏览器崩溃。​.
.
• CORS 与代理兼容，只要服务端允许跨域就可以使用。​.
. ·. ·. ·. ·. ·. ·. ·. ・.

---

四、Axios：为什么它做不了真正的流式输出？​.

A lot of people think Axios can handle streaming because it supports progress events,but in reality it can't deliver incremental text out-of--box because it's built on top of XHR which only provides entire response once it's finished.

为什么不行？说起来，​.

javascript // ❌ Axios只能这样写 - 一次性拿完所有内容。不可按字符实时渲染 const response = await axios.post;console.log，// 全部内容一起打印​

A‑XOR’s `response.data` is populated only after server sends whole payload and browser finishes parsing it. There’s no hook that gives you partial strings as y arrive.

那 onDownloadProgress 呢？​.

javascript axios.post('/api/chat',{ prompt:'hi' }。{ onDownloadProgress: progressEvent => { console.log;})，

This listener only tells you how many bytes have been downloaded so far – it doesn't expose actual string chunks you could render incrementally. Even if you around by reading `xhr.responseText`,you’ll face:

• No logical boundaries – cannot split by or or delimiters reliably.​.;​.，. . . . . . .^"">;按理说，​.. . ．．．．．．．．．．．．．．．…，・；・，・；・，············…. . ● ● ● ●，。，。，。，…But let’s keep concise: • No natural message boundaries – you’d have to manually split by newlines or custom markers. • Multi-byte characters such as Chinese may be cut mid‑character leading to garbled output. • You’d need a diff algorithm to detect new parts each time – cumbersome and error prone. Thus Axios is not suitable when your goal is real‑time streaming UI like “ChatGPT typing effect.” If your API returns a single JSON payload。Axios works fine,but for incremental streams stick with native streaming APIs.

  ---

  五、SSE：另一种优雅方案 — 如果你想更简单一些 ​.

  SSE 是 HTML5 标准的一部分，用于让服务器主动向客户端推送事件而不是客户端主动拉取。这在实时通知和“消息推送”场景特别友好，因为浏览器自带重连和文本解析能力。

  主要用法示例 ​.

  javascript // 客户端极其简单 — 就三行代码搞定！const eventSource = new EventSource;eventSource.onmessage = event => { console.log;document.getElementById.textContent += event.data;}，怎么说呢，eventSource.onerror = error => { console.error;}，
  • 至于P.S.。SSE 默认只支持 GET 方法，而且无法携带自定义 Header。​.，​.;. . . . ​ But still easy to use in most cases where you just need simple text push. <\/ul> ---

    SSE 的主要优势 🔑

    • API 极其简单 — 一个构造函数 + 两个回调足以完成工作。​
    • 自动重连 — 浏览器会在连接断开后自动尝试恢复，无需额外代码。​
    • 协议友好 — 基于标准 HTTP。可穿透大多数防火墙和代理，不像 WebSocket 那样被拦截。​

    ---

    SSE vs Fetch 流式 — 怎么选？

    对比维度<\/th>	Fetch 流式<\/th>	SSE<\/th> <\/tr> <\/ad>
    # 请求方式及可定制程度<\/b> \ n <\/a><\/tid> \t \t\t \t \t \t \t \t \t \t \t \t" "} td>" }