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

相关推荐
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半8 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
工业互联网专业9 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
你好龙卷风!!!9 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js