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

使用fetchEventSource

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

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

如下:

javascript 复制代码
devServer:{

     proxy:{},

     compress:false 

}

安装插件

javascript 复制代码
npm install @microsoft/fetch-event-source

引入插件

javascript 复制代码
import { fetchEventSource } from "@microsoft/fetch-event-source";

vue关键代码:

javascript 复制代码
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

相关推荐
运维-大白同学22 分钟前
将django+vue项目发布部署到服务器
服务器·vue.js·django
星星会笑滴2 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5412 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.2 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普2 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King2 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑3 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1253 小时前
前端预览pdf文件流
前端·javascript·vue.js
join83 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf