微信小程序实现流式响应(打字机效果)

最近做的微信小程序中有"Ai对话"需求,其中重要的一点就是流式响应,现分享处理逻辑。

微信小程序请求不支持接受stream流

开始时尝试在wx.request方法请求体中加入responseType: 'stream'等方法进行实现,发现在 success 回调中,并不是实时返回的,而是最后的完整结果。显然这种方法不行~

而后找到了真正的可行方案:onChunkReceived

也就是在小程序中发起请求时,开启 enableChunked,并监听onChunkReceived的回调,进行数据处理

代码实现

js 复制代码
const requestTask = wx.request({
    url: 'xxx',
    method: 'GET',
    responseType: "arraybuffer",
    enableChunked: true, //关键!开启流式传输模式
    header: {
      'content-type': 'application/json',
    },
    data: {
      "prompt": '我梦见了一只金毛抢我的篮球',
    },
    success: (res) => {
      console.log("结束----request success", res);
    },
    fail: (err) => {
      console.log("request fail", err);
    },
});
// 监听请求头接受事件
requestTask.onHeadersReceived(r => {
});

// 监听数据分块接收事件
requestTask.onChunkReceived((response) => {
    console.log('response',response)
    // 收到流式数据,根据返回值进行相对应数据解码
    let data16 = app.buf2hex(response.data)
    let responseText = app.hexToStr(data16)
    
    // 将处理好的字符串加入到数据中
    this.setData({
        text: this.data.text + responseText
    })
});

以上,就解决了我们的流式传输问题。


顺便分享下自己解码时用到的两个方法

js 复制代码
/**
* 将 ArrayBuffer 转换为十六进制字符串
* @param {ArrayBuffer} buffer - 待转换的 ArrayBuffer
* @returns {string} - 转换后的十六进制字符串
*/
buf2hex(buffer) {
    return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
},

/**
* 将十六进制字符串转换为普通字符串
* @param {string} hex - 十六进制字符串
* @returns {string} - 转换后的普通字符串
*/
hexToStr(hex) {
    let str = '';
    for (let i = 0; i < hex.length; i += 2) {
      str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
    }
    return str;
}
相关推荐
uhakadotcom6 分钟前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道8 分钟前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树32 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro32 分钟前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手36 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209737 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737441 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了144 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王1 小时前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄1 小时前
echarts 实现环形渐变
前端·echarts