axios进度条onDownloadProgress函数total参数undefined解决分析

更新时间：2023年07月25日 14:52:07 作者：水冗水孚

这篇文章主要介绍了axios进度条onDownloadProgress函数total参数undefined解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

问题描述

使用axios发请求，想要实现一个请求的结果进度
比如当网络慢的情况，或者某个请求返回的数据量比较大的情况等
最常见的就是下载一个大文件，要查看大文件下载的进度
axios的onDownloadProgress函数已经帮我们封装好了
是基于原生的ProgressEvent套壳子的

比如我们下载一个流文件，要呈现下载的进度，在这里打印一下进度事件

axios({
    method: "get",
    responseType: "blob", // 流文件为blob类型
    url: "http://ashuai.work:10000/getDoc",
    onDownloadProgress(ProgressEvent) {
        console.log('进度事件', ProgressEvent);
    }
}).then(({ data }) => {
    console.log('接口请求完成',data);
});

打印结果如下图：

这里为何拿不到total的值？

是因为接口的响应头，没有返回Content-Length属性
所以ProgressEvent就拿不到这个值，所以就没有total的值，就为undefined

请看响应头

Content-Length 大家可以简要理解成为一个接口返回的内容的总大小，单位字节，我们知道了某个时刻loaded多少字节，知道总字节，就可以得出百分比了

解决方案

让后端在响应头上加上Content-Length即可

笔者这里使用express演示一下代码：

route.get('/getDoc', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  // fs.statSync读取文件信息，读取当前目录下的study.docx文件
  let docxUrl = './doc/study.docx'
  const Myfilesize = fs.statSync(docxUrl).size // 拿到文件字节大小
  // 设置请求头
  res.writeHead(200, {
    'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'content-length': Myfilesize // 加上即可
  })
  let readStream = fs.createReadStream(docxUrl) // 流文件pipe管道返回
  readStream.pipe(res);
})

加上以后，响应头就有Content-Length了，就能正常了

这样的话，进度条效果也就有了

流文件请求手动加上，普通的请求会自带Content-Length的

代码附上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.5/axios.js"></script>
    <title>请求接口进度</title>
</head>
<body>
    <button @click="goPreview">点击预览word文件</button>
    <br>
    <progress max="100" value="0"></progress> <span class="val">0</span>
    <script>
        let btn = document.querySelector('button')
        let prog = document.querySelector('progress')
        let v = document.querySelector('.val')
        btn.onclick = () => {
            axios({
                method: "get",
                responseType: "blob", // 流文件为blob类型
                url: "http://ashuai.work:10000/getDoc",
                onDownloadProgress(ProgressEvent) {
                    let percent = Math.floor((ProgressEvent.loaded / ProgressEvent.total) * 100)
                    prog.setAttribute('value', percent)
                    v.innerHTML = percent + '%'
                    console.log('进度事件', ProgressEvent);
                }
            }).then(({ data }) => {
                console.log(data); // 后端返回的是流文件
            });
        }
    </script>
</body>
</html>

以上就是axios进度条onDownloadProgress函数total参数undefined解决分析的详细内容，更多关于axios进度条onDownloadProgress的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

从原生JavaScript到React深入理解
这篇文章主要为大家介绍了从原生JavaScript到React深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vuex的API文档说明详解
本文将详细介绍Vuex的API文档,需要的朋友可以参考下
2020-02-02
通过修改referer下载文件的方法
遇到了一个郁闷的事：如果让Http对象作全局变量，那么onreadystatechange只会在第一次执行时触发，以后都不会触发这个事件了。只好在每次Down文件时重新创建一个XmlHttp对象。
2008-05-05
Intersection Observer交叉观察器示例解析
这篇文章主要为大家介绍了Intersection Observer交叉观察器示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
ChatGPT用于OA聊天助手导致访问量服务宕机
这篇文章主要为大家介绍了ChatGPT用于OA聊天助手导致访问量服务宕机，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
详解如何让页面与 iframe 进行通信
这篇文章主要为大家介绍了详解如何让页面与 iframe 进行通信实现实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
JavaScript parseInt0.0000005打印5原理解析
这篇文章主要为大家介绍了JavaScript parseInt0.0000005打印5原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Server-sent events实时获取服务端数据技术详解
这篇文章主要为大家介绍了Server-sent events实时获取服务端数据技术详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
微信小程序 Flex布局详解
这篇文章主要介绍了微信小程序 Flex布局详解的相关资料,需要的朋友可以参考下
2016-10-10
微信小程序中setInterval的使用方法
这篇文章主要介绍了微信小程序中setInterval的使用方法的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
2017-09-09