sse实现post传值,使用(fetch-event-source)插件

5,786 阅读1分钟

1 post传值

sse本身是不支持post的方式,通过fetch的方式可以完成post相关操作。具体可以使用开源组件完成需求:github.com/Azure/fetch…

安装fetch-event-source组件

npm install @microsoft/fetch-event-source

前端使用sse

引入方法  

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

function fetch(){

       this.riskNum = 0

        var that =this

        let data={}

                    this.controller = new AbortController()

                    const signal = this.controller.signal

                    fetchEventSource('/dcs-api/stream', {

                      method: 'POST',

                      signal: signal,

                      headers: {

                            'Content-Type': 'text/event-stream',

                            'Cache-Control': 'no-cache',

                            'Connection': 'keep-alive'

                        },

                      body: JSON.stringify(

                        data

                        ),

                        async onopen(response) {//建立连接的回调

                        },

                      onmessage(msg) {   //接收一次数据段时回调,因为是流式返回,所以这个回调会被调用多次

                        if(msg.event==''){

                            //进行连接正常的操作

                        }else if (msg.event === 'close') {

                                controller.abort();

                        }

                        },

                        onclose() {//正常结束的回调

                             arInterval(that.timer1)

                           that.controller.abort()  //关闭连接

                          },

                      onerror(err){//连接出现异常回调

                            // 必须抛出错误才会停止

                            throw err

                        }

                    })

}

参考资料:www.cnblogs.com/HTLucky/p/1…