前端开发攻略---分块加载大数据

news2024/11/23 9:12:54

一、问题

解决当遇到较大的数据请求，当用户网络较差的时候，需要等很久很久才能拿到服务器的响应结果，如果这个响应结果需要再页面上展示的话，会导致页面长时间白屏的问题

二、实现原理

当发送一个请求时，需要等服务器把响应体全部都传输完成，客户端才能够拿到响应结果，一旦响应体非常大并且用户网络差的情况下，就需要等待很长时间。这里的解决方法就是响应体传输一点，客户端就去拿一点，用一点，直到全部传输完成。

<!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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2202972.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！