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

最新推荐文章于 2024-11-14 15:33:48 发布

bbamx.

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量319

点赞数 4

分类专栏：前端开发攻略文章标签：前端 javascript

本文链接：https://blog.csdn.net/nibabaoo/article/details/142826969

版权

前端开发攻略专栏收录该内容

57 篇文章 1 订阅

订阅专栏

一、问题

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

二、实现原理

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

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