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 自定义动态组件实例详解

    Vue 自定义动态组件实例详解

    vue的ui组件库很多种,但是这么多的组件库也不能满足我们的开发需求,所以需要我们根据自己需求自己写一个插件,下文小编通过两个栗子给大家介绍js自定义组件的方法,感兴趣的朋友一起看看吧
    2018-03-03
  • element-ui 远程搜索组件el-select在项目中组件化的实现代码

    element-ui 远程搜索组件el-select在项目中组件化的实现代码

    这篇文章主要介绍了element-ui 远程搜索组件el-select在项目中组件化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue 2源码解析HTMLParserOptions.start函数方法

    Vue 2源码解析HTMLParserOptions.start函数方法

    这篇文章主要为大家介绍了Vue 2源码解析HTMLParserOptions.start函数方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • 谈谈VUE种methods watch和compute的区别和联系

    谈谈VUE种methods watch和compute的区别和联系

    本篇文章主要介绍了谈谈VUE种methods watch和compute的区别和联系,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue项目在运行npm run build时卡住不动问题及解决方案

    vue项目在运行npm run build时卡住不动问题及解决方案

    这篇文章主要介绍了vue项目在运行npm run build时卡住不动问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • Vue3封装ElImageViewer预览图片的示例代码

    Vue3封装ElImageViewer预览图片的示例代码

    本文主要介绍了Vue3封装ElImageViewer预览图片的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue项目命名规范指南分享

    Vue项目命名规范指南分享

    本文提供Vue3+Pinia+VueRouter项目命名规范,涵盖组件、路由、状态等命名风格,推荐使用ESLint和Prettier工具,统一风格提升协作效率
    2025-07-07
  • vue中如何使用vue-baberrage生成弹幕

    vue中如何使用vue-baberrage生成弹幕

    这篇文章主要介绍了vue中如何使用vue-baberrage生成弹幕,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vuex实现数据增加和删除功能

    Vuex实现数据增加和删除功能

    今天小编就为大家分享一篇Vuex实现数据增加和删除功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论