vue请求流式接口

想要实现ai问答的功能，那么常见的都是流式响应。那么前端该如何接收流式响应

接口响应效果

代码

引入fetchEventSource
import { fetchEventSource } from '@microsoft/fetch-event-source';fetchEventSource(`/api/Chat/send`, {method: "post",headers: {"Content-Type": 'application/json','Authorization': 'Bearer ragflow-M4NDk3MjJhYjE0NTExZWZiMjI0MDI0Mm'},body: JSON.stringify(that.filterOptions),signal: controller.signal,openWhenHidden: true,onmessage(evt) {//自动滚动到底部that.autoScroll()//流输出时处理流式数据console.log('看一下',evt);console.log('看一下22',JSON.parse(evt.data));if(evt.data&&JSON.parse(evt.data).data&&JSON.parse(evt.data).data!=true){let orderData = JSON.parse(evt.data)if(orderData.data.hasOwnProperty(answer)&&orderData.data.answer){//如果答案是一次上一次多字的话 就采取赋值的形式// answer = orderData.data.answer||''//如果答案是一次拼接到上一次后面 就需要拼接answer = that.answer+orderData.data.answerthat.dealAnswer(answer)}else if(orderData.data.hasOwnProperty(quote)&&orderData.data.quote&&orderData.data.quote.length){that.dealAnswer(answer,document)}}},onerror(err) {//处理错误},onclose() {//流输出结束后做的处理console.log('over')that.isFetching = false},});