我要评论使用fetcheventsource实现sse流式请求
最近在项目开发的过程中，需要实现一个功能
根据进度条的进度动态实时加载获取到的数据并展示出来
用到的是fetcheventsource
以下主要写下js的实现的过程（前端用到的ui组件是antd-design-vue1.78版本 vue2.0项目）
首先下载插件：
npm install --save @microsoft/fetch-event-source
<div class="progress_container" v-if="!progressdone">
<div class="progress_row">
<a-progress type="line" :percent="progressvalue" status="active" />
</div>
<div class="progress_text">
{{ progresstxt }}
</div>
</div>
<script>
import { fetcheventsource } from '@microsoft/fetch-event-source'
import storage from 'store'
import { access_token } from '@/store/mutation-types'
export default {
data () {
return {
speed: 30,
progressvalue: 0,//进度条初始值
progresstxt: '',//进度条文字展示默认值
eventsource: null,
abortcontroller: null,
checkmessage: [],
checkresult: {},
resultdata: [],
submitunable: true,
progressdone: false
}
},
created () {
this.connectsse()
},
destroyed () {
this.stopsse()
},
methods: {
connectsse () {
this.abortcontroller = new abortcontroller() // 终止or结束会话，做了个全局的...
const url = process.env.vue_app_api_base_url + `自己的请求数据接口`
const token = storage.get(access_token)
// 开始会话链接，也做了个全局的......
this.eventsource = fetcheventsource(url, {
method: 'post',
headers: {
'content-type': 'application/json',
[access_token]: token
},
// 传参只能发送文本格式的数据
body: json.stringify({
}),
signal: this.abortcontroller.signal,
onopen: (event) => {
console.log(event, 'sse在连接打开时被调用')
},
onmessage: (event) => {
// console.log('sse会在通过事件源收到数据时触发')
// console.log('接口返回', json.parse(event.data))
//我这里是判断我请求回来的数据里是否包含'[done]'，他是数组里的最后一项，表示加载完成
if (!event.data.includes('[done]')) {
const data = json.parse(event.data)
const text = data.message
const percent = data.percent
const message = data.message
if (text === 'connect') {
// 连接成功，开始检测逻辑
this.progressdone = false
this.progressvalue = 0
this.progresstxt = '数据检查中，该过程可能需要一段时间，请勿关闭窗口'
this.getturncheck()
return false
}
//定时器，控制进度条和文字的展示速度
this.speed += 300
this.timer = settimeout(() => {
this.progressvalue = number(percent)
this.progresstxt = message
if (this.progressvalue === 100 && !this.progressdone) {
this.stopsse()
}
}, this.speed)
}
if (event.data.includes('[done]')) {
}
},
onerror: () => {
console.log('sse抛出异常onerror')
this.stopsse()
},
// onclose函数是会话结束正常关闭触发，但几乎没有做到这步，不执行这个回调，不知道什么原因
onclose: () => {
console.log('onclose')
}
})
},
// 停止sse
async stopsse () {
// 关闭业务，执行关闭sse数据接口
await this.getclosesse()
if (this.abortcontroller) {
this.timer && cleartimeout(this.timer)
console.log('sse结束会话了')
this.abortcontroller.abort() // 结束会话
}
},
//检查数据的接口
async getturncheck () {
const params = {
}
},
//关闭sse接口
async getclosesse () {
const params = {
}
const [err, res] = await to(closesse(params))
if (err) return false
}
},
}
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论