五行代码实现deepseek AI的流式回复效果(附fetch/xhr区别)

前言

之前的工作中，由于对接过多个 AI API 接口，用于生成文本、音频、图片和视频，积累了很多的经验，后期我会不断更新AIGC相关内容，这期先讲AI文本流式回复效果

我命由我不由天，废话不多上干货  👍👍👍

先来看效果（deepseek）

省流：原生fetch请求的getReader（流读取）方式即可实现

看到这里大佬们应该都知道怎么做了

思路

• 选择合适的请求api
• 请求响应成功后，得到AI回复的流式内容
• 在不断获取到内容时，流式展示到前端

浏览器原生AJAX能力

XHR	Fetch	功能
✅	✅	请求
✅	❌	请求进度
✅	✅	响应
✅	✅	响应进度
❌	✅	重定向
✅	✅	中断请求
❌	✅	流
❌	✅	cookie
❌	✅	Service Worker
❌	✅	referrer

从上面可以看出，fetch可以支持流式数据，再加上fetch可以先获取响应头结果后再获取响应体，看来，我们这次使用 fetch方法无疑了。

示例

// 拿到响应头后promise就会完成
const resp = await fetch(url)
// 获取剩余的响应体
const body = await resp.text()

确定具体api后

流式读取内容

resp.body 是一个 ReadableStream

ReadableStream API

1. ReadableStream
   • 表示可读取的字节流
2. ReadableStream.getReader()
   • 返回一个 流读取器（ReadableStreamDefaultReader） ，用于手动读取流数据
3. ReadableStreamDefaultReader.read(）
   • 返回一个 Promise，解析后返回 { done, value }。
     • done 表示流是否读取完毕。
     • value 是当前读取到的 Uint8Array 数据块（chunk）。

// 拿到响应头请求成功
const resp = await fetch(url)
// 生成流读取器
const reader = resp.body.getReader()
const decoder = new TextDecoder()
// 手动循环获取
while (1) {
  const { done, value } = await reader.read()
  if (done) { break; }
  // 循环获取到的内容，新增到AI回复内
  const text = decoder.decode(value)
}

至此，大功告成

结语

我会言简意赅地解释问题。励志让每一个程序猿用最短的时间和最清晰的思路解决遇到的难题。

我是"小6️⃣"，有着11年编程行业经验的博主。 想快速掌握核心思路？快来跟上我的步伐！关注我，感恩 感恩 感恩， 与我一起洞察 AIGC 技术前沿，精进前端开发技能。