对话流式数据加载

需求:根据接口返回的数据进行类似打字机渲染的效果

使用的fetch 流式处理

 fetch('BASE_URL/api/apps/' + this.app_Id + '/chat-messages', {
                signal: this.controller.signal,
                method: 'POST',
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('token'),
                    'Content-Type': 'application/json;charset=UTF-8',
                    'Access-Control-Allow-Origin': '*',
                },
                mode: 'cors',
                body: JSON.stringify({
                    query: this.chat_input,
                    chat_id: this.chat_Id,
                    stream: true,
                    app_config: getApp_config,
                }),
            })
            .then((response) => {
            			const reader = response.body.getReader();
                        const decoder = new TextDecoder();
                          let buffer = '';
                        function processResult() {
                            reader
                                .read()
                                .then(({ done, value }) => {
                                    if (done) {
                                        that.chat_input = '';
                                        that.isInputend = false;
                                        return;
                                    }
                                    const chunk = decoder.decode(value, { stream: true });
                                    buffer += chunk;
                                    console.log(buffer, 'buffer========');
                                    // 分割数据并解析JSON
                                    const lines = buffer.split('\n');
                                    console.log(lines, 'lines========');
                                    lines.forEach((line) => {
                                        if (line.startsWith('data: ')) {
                                            const jsonStr = line.substring(6); // 去掉前缀
                                            try {
                                                const data = JSON.parse(jsonStr);
                                                // console.log('Parsed data:', data);
                                                if (data.event === 'message_end') {
                                                    that.chat_input = '';
                                                    that.isInputend = false;
                                                    that.chatList[
                                                        that.chatList.length - 1
                                                    ].referenceList = data.referencesList;
                                                    reader.cancel(); // 取消reader,结束流
                                                } else {
                                                    if (
                                                        that.chatList[that.chatList.length - 1]
                                                            .answer == that.$t('text80')
                                                    ) {
                                                        that.chatList[
                                                            that.chatList.length - 1
                                                        ].answer = '';
                                                    }
                                                    that.chatList[
                                                        that.chatList.length - 1
                                                    ].answer += data.answer;
                                                    // that.chatList[that.chatList.length - 1].answer =
                                                    //     '服务器异常,请重试';
                                                }
                                            } catch (error) {
                                                // console.error('Error parsing JSON:', error);
                                            }
                                        }
                                    });
                                    buffer = lines[lines.length - 1]; // 保留最后一个不完整的行
                                    processResult(); // 继续处理下一个chunk
                                })
                                .catch((error) => {
                                    console.error('Error reading the stream:', error);
                                });
                        }
                        processResult();
            })

接口返回的数据格式
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/913831.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于git使用的图文教程(包括基本使用,处理冲突问题等等)超详细

目录 用户签名,初始化git git提交流程图 提交到本地库 版本穿梭 分支操作 分支合并冲突 团队协作 github的使用 推送代码 克隆 拉取代码 团队协作冲突 团队协作之分支管理 推送分支到分支: 拉去远程库分支到本地库: 本地删除远程分支&am…

6、If、While、For、Switch

6、If、While、For、Switch 一、If 1、if-else if (boolean) {代码块 } else if (boolean) {代码块 } else if (boolean) {代码块 } else { // 默认情况代码块 }关于IDEA单元测试控制台不能输入数据的问题: https://blog.csdn.net/m0_72900498/article/details/…

【智谱开放平台-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

贪心算法day05(k次取反后最大数组和 田径赛马)

目录 1.k次取反后最大化的数组和 2.按身高排序 3.优势洗牌 1.k次取反后最大化的数组和 题目链接:. - 力扣(LeetCode) 思路: 代码: class Solution {public int largestSumAfterKNegations(int[] nums, int k) {//如…

简简单单的UDP

前言 上一篇了解了TCP的三次握手过程,目的、以及如何保证可靠性、序列号与ACK的作用,最后离开的时候四次挥手的内容,这还只是TCP内容中的冰山一角,是不是觉得TCP这个协议非常复杂,这一篇我们来了解下传输层另外一个协…

安科瑞工业绝缘监测装置:保障煤矿井下6kV供电系统安全运行的关键应用——安科瑞 丁佳雯

在现代煤矿开采中,供电系统的稳定性和安全性是至关重要的。特别是在煤矿井下,由于环境复杂、湿度大、易腐蚀等因素,供电系统面临着严峻的挑战。为了确保供电系统的正常运行和矿工的生命安全,采用先进的绝缘监测装置显得尤为重要。…

OKG Research:用户意图驱动的Web3应用变革

出品| OKG Research 作者|Samuel QIN 当前加密市场的快速演变中,用户增长成为行业可持续发展的基石。目前主流观点在推动行业前进的路上,从单纯的技术探索在向更注重应用价值的方向转变。尽管近年来Web3生态系统发展迅速&#xf…

人工智能:重塑医疗、企业与生活的未来知识管理——以HelpLook为例

一、医疗行业:AI引领的医疗革新 随着人工智能(AI)技术的持续飞跃,我们正身处一场跨行业的深刻变革之中。在医疗健康的广阔舞台上,人工智能技术正扮演着日益重要的角色。它不仅能够辅助医生进行病例的精准诊断&#xf…

Ubuntu 20.04安装CUDA 11.0、cuDNN 8.0.5

不知道咋弄的ubuntu20.04电脑的cuda驱动丢了,无奈需装PyTorch环境,只有CUDA11.0以上版本才支持Ubuntu20.04,所以安装了CUDA11.0、cuDNN8.0.5 为防止频繁在浏览器检索对应的贴子,今天记录一下。 一. 驱动安装 为防止驱动安装后没…

Vue Element-UI 选择隐藏表格中的局部字段信息

一、功能需求分析 为什么需要这个功能? (1)简化信息,减少混乱: 就像整理抽屉,只留下常用的东西,这样找起来更快,看起来也更整洁。在表格中,只展示需要的字段&#xff…

STL学习-排序算法

1.sort 使用快速排序,平均性能好O(nlogn),但最差情况可能很差O(n^2)。不稳定。 sort(v.begin(),v.end());//对v容器进行排序,默认升序 sort(v.begin(),v.end(),greater<int>());//降序排序 2.partial_sort 使用堆排序,平均性能和最差都是O(nlogn),但实际情况比sort慢…

WSL 2 中 FastReport 与 FastCube 的设置方法与优化策略

软件开发人员长期以来一直在思考这个问题&#xff1a;“我们如何才能直接在 Windows 中运行 Linux 应用程序&#xff0c;而无需使用单独的虚拟机&#xff1f;” WSL 技术为这个问题提供了一个可能的答案。WSL 的历史始于 2016 年。当时&#xff0c;其实现涉及使用 Windows 内核…

JVM的组成、字节码文件的组成

目录 java虚拟机的组成 字节码文件的组成 基础信息 常量池 字段 方法 属性 字节码相关的常用工具&#xff1a; 总结&#xff1a; 1、如何查看字节码文件&#xff1f; 2、字节码文件的核心组成有哪些&#xff1f; java虚拟机的组成 类加载器 ClassLoader运行时数据区…

李佳琦回到巅峰背后,双11成直播电商分水岭

时间倏忽而过&#xff0c;又一年的双11即将宣告结束。 从双11正式开始前的《新所有女生的offer》&#xff0c;到被作为“比价”标杆被其他平台直播间蹭、被与其他渠道品牌比较&#xff0c;再到直播间运营一时手快多发了红包……整个双11周期下来&#xff0c;李佳琦直播间在刷新…

使用iviewui组件库的坑

背景 使用view-design组件库的Input组件的时候&#xff0c;按照产品的要求&#xff0c;输入框中只能键入正整数。 使用效果 如果直接使用组件的type属性&#xff0c;设置类型为number时&#xff0c;乍一看没啥问题&#xff0c;但是当我们键入 小数点(.) 或者 e/E 后面没有跟任…

软件测试学习记录 Day1

根据黑马程序员最新版的软件测试课程所做的笔记&#xff0c;需要原件后台私信&#xff1a; 练习提取测试点&#xff1a; 博主的答案&#xff0c;有不一样看法的可评论区讨论&#xff1a;

uni-app选项卡制作 ⑥

文章目录 十、选项卡制作一 、组件创建二、scroll-view 组件使用三、点击设置按钮跳转到标签设置界面四、数据获取 十、选项卡制作 1.遇到错误&#xff1a; 2.解决问题&#xff1a; 3.this 指向问题 // 指向&#xff1a; get_label_list uniCloud.callFunction({name: "g…

最新x64dbg软件

最新x64dbg软件 1、简介2、调试程序界面3、开源官网 1、简介 最新x64dbg软件-比OD更好的工具&#xff0c;原生支持中文界面和插件。 x64dbg是一款专业的windows系统下的64位调试器&#xff0c;界面简洁、操作简单&#xff0c;与 “OllyDbg” 调试工具非常相似&#xff0c;如果…

【时间之外】IT人求职和创业应知【31】

目录 新闻一&#xff1a;2024年“秦创原沣东杯”陕西省科技工作者创新创业大赛颁奖仪式暨沣东新城机器人产业发展大会盛大启幕 新闻二&#xff1a;声网CEO赵斌&#xff1a;RTE将成为生成式AI时代AI Infra的关键部分 新闻三&#xff1a;“5G工业互联网”融合应用试点城市名单…

Docker使用docker-compose一键部署nacos、Mysql、redis

下面是一个简单的例子&#xff0c;展示如何通过Docker Compose文件部署Nacos、MySQL和Redis。请确保您的机器上已经安装了Docker和Docker Compose。 1&#xff0c;准备好mysql、redis、nacos镜像 sudo docker pull mysql:8 && sudo docker pull redis:7.2 &&…