前端获取流式数据并输出

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

        原生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结束。

你可能感兴趣的:(js,前端,javascript,开发语言)