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实现轮播图与页面滚动详解

    在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-10-10
  • vue/react单页应用后退不刷新方案

    vue/react单页应用后退不刷新方案

    本文主要介绍了vue/react单页应用后退不刷新方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 详解VUE-地区选择器(V-Distpicker)组件使用心得

    详解VUE-地区选择器(V-Distpicker)组件使用心得

    这篇文章主要介绍了详解VUE-地区选择器(V-Distpicker)组件使用心得,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue预览图片和视频的几种实现方式

    Vue预览图片和视频的几种实现方式

    本文主要介绍了Vue预览图片和视频的几种实现方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue项目返回页面保持上次滚动状态方式

    Vue项目返回页面保持上次滚动状态方式

    这篇文章主要介绍了Vue项目返回页面保持上次滚动状态方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue elementUI使用tabs与导航栏联动

    vue elementUI使用tabs与导航栏联动

    这篇文章主要为大家详细介绍了vue elementUI使用tabs与导航栏联动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06
  • vue transition组件及常用属性

    vue transition组件及常用属性

    在使用Vue过渡动画时,注意选择器优先级,谨慎合并样式,Vue2中关于显示隐藏的类名有v-enter、v-leave以及v-enter-active、v-leave-active等,这些可以用来定义动画的持续时间和样式,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • vue如何给element-ui中的el-tabs动态设置label属性

    vue如何给element-ui中的el-tabs动态设置label属性

    这篇文章主要介绍了vue如何给element-ui中的el-tabs动态设置label属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VueX安装及使用基础教程

    VueX安装及使用基础教程

    这篇文章介绍了VueX安装及使用基础教程,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • Vue axios 将传递的json数据转为form data的例子

    Vue axios 将传递的json数据转为form data的例子

    今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论