编程技巧：VUE 实现接口返回数据的流式处理

夸父CV

已于 2025-02-14 16:36:33 修改

阅读量2.9k

点赞数 15

分类专栏：编程技巧与原理解析文章标签： vue.js 前端 javascript 前端框架开发语言 chrome node.js

于 2025-02-14 16:36:10 首次发布

本文链接：https://blog.csdn.net/qq_26629277/article/details/145636248

版权

一、写在前面

ChatGPT 的问答响应界面相信大家都见过，内容是一点一点追加式的显示。不是等好了一起发给你，然后一次性展示出来。这种效果和我们平常开发的展示渲染模式有点区别。可能有的同学会说，前端拿到报文后，我们做成这样的效果不就行行了，有什么难的。
这话看起来很对，但其实不那么对。试想一下，如果一个问答内容响应体很大，几十上百兆，等报文传输完了，我们再显示，中间界面等待的时间会很长，体验其实是很差。
那有什么办法能加速在大报文的场景下，能加速前端界面渲染效果呢？

二、传统式交互

const url ='http://ip:port/path';
async function getResponse(){
    const resp = await fetch(url,{
        method : 'GET',
    });
    console.log('123');
    const data = await resp.text();
    console.log(data);
}
getResponse();

直接从HttpResponseBody中直接一次性获取服务端的响应内容是传统式编程开发。