前端开发攻略---分块加载大数据
优化从远程服务器获取较大数据时加载慢的问题
·
一、问题
解决当遇到较大的数据请求，当用户网络较差的时候，需要等很久很久才能拿到服务器的响应结果，如果这个响应结果需要再页面上展示的话，会导致页面长时间白屏的问题
二、实现原理
当发送一个请求时，需要等服务器把响应体全部都传输完成，客户端才能够拿到响应结果，一旦响应体非常大并且用户网络差的情况下，就需要等待很长时间。这里的解决方法就是响应体传输一点，客户端就去拿一点，用一点，直到全部传输完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
async function readFile() {
const url = 'http://127.0.0.1:8888/ttt.txt'
const resp = await fetch(url)
// 从响应体中获取一个读取器（reader），允许你逐块读取响应的数据流。
const reader = resp.body.getReader()
// 创建一个 TextDecoder 实例，用于将读取到的字节数据转换为文本字符串。
const decoder = new TextDecoder()
while (1) {
// 使用 reader.read() 异步读取下一块数据。value 是读取到的字节，done 是一个布尔值，指示是否已读取到流的末尾。
const { value, done } = await reader.read()
if (done) break
// 将读取到的字节（value）解码为字符串格式。
const text = decoder.decode(value)
console.log(text)
}
}
readFile()
</script>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
4
0- 0
已为社区贡献7条内容
所有评论(0)