1. 首先看看效果:
流式数据获取并展示
左右两侧前端代码差异:
左右两侧是请求同一个node接口,前端使用的是 fetch
在左侧对 fetch 返回数据的处理是:response.body.getReader().read去监听response中body数据的每一次数据变化,并直接开始渲染数据
在右侧对fetch 返回的数据处理是:直接等待response.data
在视频中可以明显看出,左侧的数据处理模式可以无需等待全部数据加载完毕便开始渲染,极大提升了大数据传输的用户体验
2. 代码设计
node部分
- 读取要传输的文件数据
- 按照分片大小创建可读流数据
- 监听创建的可读流数据变化,每次变化时将数据写入响应给前端的 res 中
上代码:
exports.getStrea

最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



