目录利用fetchEventSource实现sse流式哀求最近在项目开发的过程中，必要实现一个功能 根据进度条的进度动态实时加载获取到的数据并展示出来
用到的是fetchEventSource以下重要写下js的实现的过程（前端用到的ui组件是antd-design-vue1.78版本 vue2.0项目） 起首下载插件： [code]npm install --save @microsoft/fetch-event-source[/code] [code]<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>[/code]总结以上为个人履历，希望能给各人一个参考，也希望各人多多支持脚本之家。 来源：https://www.jb51.net/javascript/326697oz7.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 09:26 , Processed in 0.028947 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
