跳到主要内容

sse请求

sse请求和普通请求​

  • 普通请求响应:一次性返回完整数据,响应结束
  • SSE 流式响应:保持连接打开,可以持续发送多个数据块,客户端实时接收

EventSource和fetch对比​

特点原生 EventSource(标准 SSE)fetch 流式请求(模拟 SSE)
协议text/event-stream普通 HTTP (可用 JSON / text)
自动重连✅ 内置重连机制❌ 需手动实现
请求方式仅支持 GET可用 POST / 携带自定义 header
响应读取浏览器自动解析事件需手动读取 ReadableStream
使用场景简单、事件驱动型更灵活,可实现 AI 流式输出

fetch实现sse​

  • 用 fetch 实现 SSE 类似的流式读取(推荐用于 AI 流输出)
  • fetch 的关键点是: 利用 Response.body 的 ReadableStream,不断读取服务端分块返回的数据
  • 利于response.body.getReader()读取 流式响应体的内容
  • 利于TextDecoder 将二进制数据(Uint8Array)转成字符串
  • 需要循环读取服务器返回的每一小块数据

场景:

  • AI对话流式数据输出内容