蓝色大气网站模板网页制作基础教程第二版

背景

让Cursor生成小程序中大模型调用内容回复的流式输出时一直有问题，参考整理此文章。
参考原文：https://blog.csdn.net/weixin_47684422/article/details/145859543

---

一、什么是流式传输？

流式传输（Streaming）指的是将数据分为若干段（chunk），边生成边发送，客户端则边接收边处理。常见于视频播放、音频播放、AI对话等场景。其优点包括：

• 降低延迟，提升响应速度
• 支持大数据量分段处理
• 改善用户体验（如AI逐字回复）

---

二、微信小程序中的流式传输方案

1. 微信小程序的限制

• 无fetch：小程序没有浏览器的fetch接口，不能直接用Response.body.getReader()流式读取。
• WebSocket不适用于所有后端：部分AI接口只支持HTTP流，不支持WebSocket。

2. 官方能力：onChunkReceived

微信小程序自基础库2.23.0起，wx.request新增了enableChunked参数和onChunkReceived回调，支持HTTP分块（chunked）传输。

要点：

• enableChunked: true 开启流式传输
• 监听onChunkReceived获取每一块数据
• 需自行拼接与处理数据内容

---

三、代码实现

1. 发起流式请求

const requestTask = wx.request({url: `${config.baseUrl}/ai/deepSeek`,header: {"X-Access-Token": wx.getStorageSync("token"),},data: JSON.stringify({question: this.question,appId: config.APP_ID,userName: 'xxx'}),method: "POST",enableChunked: true, // 开启流式传输responseType: "arraybuffer", // 推荐使用arraybuffer，兼容性更好
});// 监听分块数据
if (requestTask?.onChunkReceived) {requestTask.onChunkReceived(this.handleChunkData);
} else {// 不支持流式，降级为普通请求this.normalRequest();
}

2. 分块数据处理

handleChunkData(res) {try {// 微信小程序ArrayBuffer转字符串let rawStr = Array.from(new Uint8Array(res.data)).map(byte => String.fromCharCode(byte)).join("");// 处理中文乱码rawStr = unescape(encodeURIComponent(rawStr));// 提取JSON内容const chunkJson = rawStr.split("data: ")[1];const rawData = JSON.parse(chunkJson);// 提取AI回复内容const text = rawData.choices?.[0]?.delta?.content;// 过滤无用内容（如<think>标签）if (text === "</think>") {this.isThink = false;}if (!this.isThink) {const tx = text.replace("</think>", "");this.streamBuffer += tx;// 实时渲染（可用markdown-it等库转换）const answer = this.list[this.list.length - 1];answer.content = markdown.render(this.streamBuffer);// 节流更新页面this.throttleUpdate();}} catch (e) {console.error("数据处理异常:", e);}
},

3. 辅助方法

// 节流更新，防止频繁渲染影响性能
throttleUpdate() {if (!this.updateTimer) {this.updateTimer = setTimeout(() => {this.$forceUpdate();this.scrollToBottom();this.updateTimer = null;}, 500);}
}

---

四、注意事项与优化建议

1. 字段结束标识：小程序没有onReceivedEnd事件，无法直接判断流式内容是否结束。建议后端返回特殊标识（如[DONE]）或协议字段，前端据此判断。
2. 中文兼容性：ArrayBuffer转字符串时，注意处理中文编码问题，推荐用TextDecoder或unescape(encodeURIComponent(...))方法。
3. 性能优化：流式内容更新频繁，建议节流更新页面，避免卡顿。
4. uniapp注意：如用uniapp，必须用wx.request，uni.request不支持chunked流。
5. 内容过滤：部分大模型（如deepSeek）返回的内容含有think标签等无用数据，需按业务过滤。

---