最近用微信小程序做chatGpt的Ai对话,其中重要的一点就是流式响应,现在分享处理逻辑,先给演示图。
下面是关键代码实现逻辑
const that = this;
const requestTask = wx.request({
url: 'xxxxx',
responseType: "arraybuffer",
method: 'POST',
enableChunked: true,
header: {
'content-type': 'application/json'
},
data: {
'prompt': '青椒肉丝怎么做'
},
success: (res) => {
console.log("request success", res);
common_vendor.index.showToast({
title: "请求成功",
icon: "success",
mask: true,
duration
});
// this.res = "请求结果 : " + JSON.stringify(res);
},
fail: (err) => {
console.log("request fail", err);
common_vendor.index.showModal({
content: err.errMsg,
showCancel: false
});
},
complete: () => {
this.loading = false;
}
});
requestTask.onHeadersReceived(function (r) {
console.log(r);
});
requestTask.onChunkReceived(function (r) {
// let decoder = new TextDecoder('utf-8');
// let str = decoder.decode(new Uint8Array(r.data));
// let en = String.fromCharCode.apply(null,new Uint8Array(r.data));
// let de = decodeURIComponent(escape(en));
// console.log("onChunkReceived", str);
const data16 = that.buf2hex(r.data) // ArrayBuffer转16进制
const requestData = that.hexToStr(data16) // 16进制转字符串
console.log(requestData);
that.res +=requestData;
});
其中有两个关键点需要注意
1.enableChunked: true流式响应开关,会自动在header中加入transfer-encoding chunked
2.arraybuffer转字符串问题,有TextDecoder就很好处理,没有也可以参照我上面的示例。
最后提供免费源码下载地址和演示二维码,全量保真。
源码下载 ChatGpt插件,支持聊天,流式输出,UI漂亮,有小程序演示 - DCloud 插件市场
文章来源:https://www.toymoban.com/news/detail-525962.html
文章来源地址https://www.toymoban.com/news/detail-525962.html
到了这里,关于微信小程序ChatGpt流式响应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!