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

ErvinBao2024-06-22 18:55

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