前端获取流式数据并输出

        在一些实时对话、日志推送等场景下，如果使用传统一次性加载数据的方式，可能会出现等待时间较长的不友好交互，这个时候我们需要使用流式布局分段获取数据，渐进式加载，减少等待焦虑。

        原生js上，我们使用fetchAPI进行流式处理

async function getStream () {try {const response = await fetch(请求地址);if (!response.body) {return false;}const reader = response.body.getReader();const decoder = new TextDecoder();while (true) {const {value, done} = await reader.read();if (done) break;// result即为返回的内容结果，根据需要进行字符串处理显示到页面上let result = decoder.decode(value, {stream: true});// 显示内容区域自动滚动到底部document.getElementById("box").scrollTo({top: document.getElementById("box").scrollHeight})}} catch (err) {console.log(err);}
}

        getReader()获取流数据，new TextDecoder()转换二进制数据，循环读取分段数据，直到done结束。