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

ErvinBao

已于 2024-06-19 23:27:40 修改

阅读量999

点赞数 5

分类专栏：日常记录文章标签： vue.js

于 2024-06-19 16:00:43 首次发布

本文链接：https://blog.csdn.net/ErvinBao/article/details/139805643

版权

日常记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用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