vue实现post请求接口流式输出数据sse

使用fetchEventSource

参考git源码:https://github.com/Azure/fetch-event-source/tree/main

本地联通 发现数据并没有流式输出:vue代理需要关闭compress

如下:

devServer:{proxy:{},compress:false }

安装插件

npm install @microsoft/fetch-event-source

引入插件

import { fetchEventSource } from "@microsoft/fetch-event-source";

vue关键代码:

connectSse(){const ctrl = new AbortController();fetchEventSource('/api/v1/sse',{method: 'POST',mode: 'no-cors',headers: {'Content-Type': 'application/json',},body: JSON.stringify({data:[this.searchData]}),signal: ctrl.signal,onopen(response){// 成功连接时回调console.log('连接成功',response)},onmessage(msg) {// 服务器返回消息回调 返回{ data,event,id,retry } ,data即服务器返回数据if (msg.event == '') {// 进行连接正常的操作流程let result = JSON.parse(msg.data)// 将需要展示的数据更新到vue的data中,当然如下this.showData肯定赋值不上,需要将this 指向一个变量,用变量接受数据即可,以下只是展示this.showData += result.content}if (msg.event === 'close') {ctrl.abort()}},onerror(err) {throw new err()}})},

研发阶段 需要配置nginx

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

远程医疗软件到底哪个好用?

随着科技进步的不断推进,远程医疗已经成为现代医疗体系的一个重要支柱。远程医疗软件,通过网络通信技术的运用,打破了地理限制,实现了医疗资源的有效整合与共享,为民众提供了前所未有的便捷高效的医疗服务体验。那么&a…

opencv识别颜色

导入必要的库:首先,需要导入 OpenCV 库和其他可能用到的库,如 NumPy。加载图像:使用cv2.imread函数加载包含多种颜色的图像。定义颜色范围:在 HSV 颜色空间中定义要识别的颜色范围。可以使用颜色选择器工具来确定所需颜…

如何修改外接移动硬盘的区号

- 问题介绍 当电脑自身内存不够使用的时候,使用外接硬盘扩展内存是一个不错的选择。但是当使用的外接硬盘数量过多的时候,会出现分配硬盘的区号变动的情况,这种情况下会极大的影响使用的体验情况。可以通过以下步骤手动调整恢复 - 配置 版本…

python-16-零基础学python 用类实现登录次数的记录

学习内容:《python编程:从入门到实践》第二版 知识点: 类,特殊函数,编写方法,创建实例,用方法修改类的值 练习内容: 练习9-5:尝试登录次数 在为完成练习9-3而编写的…

功能测试【测试用例模板、Bug模板、手机App测试】

功能测试 Day01 web项目环境与测试流程、业务流程测试一、【了解】web项目环境说明1.1 环境的定义:项目运行所需要的所有的软件和硬件组合1.2 环境(服务器)的组成:操作系统数据库web应用程序项目代码1.3 面试题:你们公司有几套环境&#xff1…

go编程中接口(interface)用法

1、编程中多态的概念 如果熟悉C编程,就会知道C中可以通过虚函数来实现多态 ,Java等面向对象的语言也有类似的特性。那么是多态呢? 多态是面向对象编程中的一个基本概念&am…

09-axios在Vue中的导入与配置

09-axios 前言首先简单了解什么是Axios?以上完成后就可以使用了 前言 我们接着上一篇文章 08-路由地址的数据获取 来讲。 下一篇文章 10-vuex在Vue中的导入与配置 首先简单了解什么是Axios? Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端…

百度文心智能体,创建属于自己的智能体应用

百度文心智能体平台为你开启。百度文心智能体平台,创建属于自己的智能体应用。百度文心智能体平台是百度旗下的智能AI平台,集成了先进的自然语言处理技术和人工智能技术,可以用来创建属于自己的智能体应用,访问官网链接&#xff1…

docker基础使用教程

1.准备工作 例子:工程在docker_test 生成requirements.txt文件命令:(使用参考链接2) pip list --formatfreeze > requirements.txt 参考链接1: 安装pipreqs可能比较困难 python 项目自动生成环境配置文件require…

通俗解释resultType和resultMap的区别

【 1 对于单表而言: 注:以下都是摘抄过来的,做了让自己更能理解的版本 如果数据库返回结果的列名和要封装的实体的属性名完全一致的话用 resultType 属性 如果数据库返回结果的列名(起了别名)和要封装的实体的属性名…

ArcGIS批量投影转换的妙用(地理坐标系转换为平面坐标系)

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 这次文章我们来介绍一下,如何巧妙用要素数据集来实现要素的批量投影。不需要ArcGIS的模型构建器与解决。 例如,有多个要素要将CGCS_2000地理坐标系投…

D触发器(D Flip-Flop)与D锁存器(D Latch)

1 基础概念 我们先来简单回顾一下D触发器(D flip-flop)和D锁存器(D latch)的概念,以及它们在数字电路中的作用。 1.1 D触发器(D Flip-Flop) D触发器是一种数字存储器件,它在时钟信号…

【VS Code 插件】SQLite 可视化插件

VScode 插件分享篇之sqlite可视化工具 项目经常用到SQLite这个轻量型数据库,于是乎,就想着找一个可视化工具,但是我有时候只是想方便预览数据 表,又不想安装额外的程序,那么这款插件很适合你。 用习惯VS Code的小伙伴…

HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现(一) HarmonyOS Next 系列之验证码输入组件实现(二) HarmonyOS Next 系列之底部标签栏TabBar实现(三) HarmonyOS Next 系列之HTTP请求封装和Token…

Win11 删除文件时提示“找不到该项目,请重试”的解决办法

1、Win R 打开运行窗口,输入 notepad 并回车打开文本文档(记事本)软件,如下图: 2、在文本文档(记事本)软件中复制粘贴以下代码,如下图: del /f /a /q \\?\%1 rd /s /q \\?\%1或DEL /F /A /Q \\?\%1 RD /S /Q \\?…

红队内网攻防渗透:内网渗透之内网对抗:网络通讯篇防火墙组策略入站和出站规则单层双层C2正反向上线解决方案

红队内网攻防渗透 1. 内网网络通讯1.1 防火墙策略-入站规则&出站规则&自定义1.1.1 防火墙默认入站&出站策略1.1.2 防火墙自定义入站&出站策略1.1.3 内网域防火墙同步策略1.2 防火墙限制1.2.1 防火墙限制端口1.2.2 防火墙限制协议1.2.2.1 防火墙协议入站限制1.2…

html做一个分组散点图图的软件

在HTML中创建一个分组散点图,可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能,易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例: 要添加文件上传功能,可以让用户上传包含数据的文…

昇思25天学习打卡营第4天|网络构建|函数式自动微分

学AI还能赢奖品?每天30分钟,25天打通AI任督二脉 (qq.com) 网络构建 神经网络模型是由神经网络层和Tensor操作构成的,mindspore.nn提供了常见神经网络层的实现,在MindSpore中,Cell类是构建所有网络的基类,也…

基于uni-app和图鸟UI的智慧农业综合管控平台小程序技术实践

摘要: 随着信息化技术的飞速发展,智慧农业已成为推动农业现代化、提升农业生产效率的重要手段。本文介绍了一款基于uni-app框架和图鸟UI设计的智慧农业综合管控平台小程序,该平台整合了传感器控制、农业数据监测、设施管控、农业新闻传播以及…

论文:R语言数据分析之机器学习论文

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2 一、研究背景 全球范围内,乳腺癌是导致癌症发病率和死亡率的主要疾病之一。根据2018年…