vue项目接收SSL数据流,vue接入AI实现一行一行输出的方式
更新时间:2026年03月09日 09:21:05 作者:斌味代码
文章介绍了如何安装和使用fetch-event-source插件,实现数据一行一行输出,并分享了个人经验,希望对大家有所帮助
1.安装fetch-event-source插件
npm install @microsoft/fetch-event-source
2.使用方法
如下所示:
fetchEventSource('https://spark-api-open.xf-yun.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
"Authorization": "Bearer apikey",
},
body: JSON.stringify(form),
openWhenHidden: true,
onopen(ops) {
// console.log(ops);
},
onmessage(res) {
// eventSource.close();
if (res.data == '[DONE]') {
data.disabledSend = false;
} else {
let resdata = JSON.parse(res.data);
textS+= resdata.choices[0].delta.content;
data.messages[msglen + 1] = { sender: 'admin', text: textS, msglen };
// console.log(data.messages)
}
},
onerror(err) {
throw Error(err);
}
});最后自行调整输出样式,就能实现数据一行一行输出了
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue利用better-scroll实现轮播图与页面滚动详解
在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。2017-10-10
详解VUE-地区选择器(V-Distpicker)组件使用心得
这篇文章主要介绍了详解VUE-地区选择器(V-Distpicker)组件使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-05
vue如何给element-ui中的el-tabs动态设置label属性
这篇文章主要介绍了vue如何给element-ui中的el-tabs动态设置label属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-08-08
Vue axios 将传递的json数据转为form data的例子
今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10


最新评论