前端开发攻略---使用AJAX监控网络请求进度

1、XHR实现

html 复制代码
<!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>
    <progress value="0" max="0"></progress>
    <script>
      const progress = document.querySelector('progress')
      function readFile2() {
        const xhr = new XMLHttpRequest()
        xhr.open('GET', 'http://127.0.0.1:8888/ttt.txt')

        xhr.addEventListener('progress', e => {
          // e.loaded是当前加载大小 e.total是总大小
          console.log(e.loaded, e.total)
          progress.setAttribute('value', e.loaded)
          progress.setAttribute('max', e.total)
        })

        // xhr.onload = function () {
        //   if (xhr.status === 200) {
        //     console.log('响应内容:', xhr.responseText)
        //   } else {
        //     console.error('请求失败,状态码:', xhr.status)
        //   }
        // }
        xhr.send() // 发送请求
      }
      readFile2()
    </script>
  </body>
</html>

2、Fetch实现

html 复制代码
<!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>
    <progress value="0" max="0"></progress>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script>
      const progress = document.querySelector('progress')
      async function readFile() {
        const url = 'http://127.0.0.1:8888/ttt.txt'
        const resp = await fetch(url)
        // 从响应头中获取数据总大小
        const total = resp.headers.get('content-length')
        // 更新进度条
        progress.setAttribute('max', total)
        // 从响应体中获取一个读取器(reader),允许你逐块读取响应的数据流。
        const reader = resp.body.getReader()
        // 创建一个 TextDecoder 实例,用于将读取到的字节数据转换为文本字符串。
        const decoder = new TextDecoder()
        // 用来存储当前加载的大小
        let loaded = 0
        while (1) {
          // 使用 reader.read() 异步读取下一块数据。value 是读取到的字节,done 是一个布尔值,指示是否已读取到流的末尾。
          const { value, done } = await reader.read()
          if (done) break
          loaded += value.length
          // 更新进度条
          progress.setAttribute('value', loaded)
          // 将读取到的字节(value)解码为字符串格式。
          // const text = decoder.decode(value)
        }
      }
      readFile()
    </script>
  </body>
</html>
相关推荐
萌新小码农‍1 分钟前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
-曾牛1 分钟前
深入浅出 SQL 注入
网络·sql·安全·网络安全·渗透测试·sql注入·盲注
想学全栈的菜鸟阿董15 分钟前
LangGraph智能体架构核心概念
网络·架构
乐大师20 分钟前
手动安装联想打印机2268w驱动
网络·打印机
NewCarRen22 分钟前
针对汽车远程无钥匙进入系统的新型重放同步攻击的缓解策略
运维·网络·安全
神的孩子都在歌唱26 分钟前
VLAN 是什么?如何用 VLAN 提高网络安全与效率?
网络·安全·web安全
冰暮流星30 分钟前
css3新增背景图片样式
前端·css·css3
LRX_19892738 分钟前
网络管理员教程(初级)第六版--第5章网络安全及管理
网络·安全·web安全
初学小白...1 小时前
TCP实现聊天
网络·网络协议·tcp/ip
彬彬醤1 小时前
如何正确选择住宅IP?解析适配跨境、流媒体的网络工具
服务器·开发语言·网络·网络协议·tcp/ip