vue接收流式数据，实现文字的实时展示

最近在做一个调用 Chat-GPT 接口的 AI 聊天项目，一开始 AI 的回答是要等请求结束，数据全部返回后才进行展示的，这导致了 AI 的回答比较多时，用户等待时间特别长。于是后端改为传输 Stream 流式数据，前端则要拿到流式数据并进行实时展示。

sendMessage(){
    let xmlHttp = new XMLHttpRequest();
    //把请求存起来，路由切换时终止请求
    this.$store.state.xhr = xmlHttp
    let url = "/api/assistant/chatbot/receive_msg"
    xmlHttp.addEventListener('load', this.reqListener);
    xmlHttp.addEventListener('progress', this.updateProgress, false);
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xmlHttp.onreadystatechange = () => {
        if (xmlHttp.readyState === XMLHttpRequest.DONE) {
            //在这里做其他处理
            }
        }
    }
}

load会在外部资源加载成功时触发，在这里将参数isLoading置为false。progress会在外部资源加载过程中不断触发，也是我们想要实现的实时展示数据的关键点，在这里我做了如下处理：

updateProgress (oEvent) {
    this.content = oEvent.target.responseText;
},

this.content保存的就是我们要展示的数据，在数据加载的过程中不断改变它，就能实现想要的效果了。