javascript axios 实现进度监控的示例代码

更新时间：2025年01月07日 09:22:19 作者：Amo 6729

在使用axios发送HTTP请求时,可以通过onUploadProgress和onDownloadProgress来监控上传和下载的进度,具有一定的参考价值,感兴趣的可以了解一下

1. 监控下载进度

axios 提供了一个 onDownloadProgress 回调函数，可以用来监听下载的进度。该回调会返回一个 progress 对象，包含 loaded（已经下载的字节数）和 total（文件的总字节数）等信息。

const axios = require('axios');

axios.get('https://example.com/large-file.zip', {
  onDownloadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${percent}%`);
  }
})
.then(response => {
  console.log('Download completed!');
})
.catch(error => {
  console.error('Error downloading file:', error);
});

2. 监控上传进度

对于文件上传，也可以使用 onUploadProgress 来监控上传进度。该回调函数类似，也返回一个 progress 对象，包含上传的字节数和文件的总字节数。

const formData = new FormData();
formData.append('file', fileInput.files[0]); // 假设文件通过 HTML 的文件输入获取

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percent}%`);
  }
})
.then(response => {
  console.log('Upload completed!');
})
.catch(error => {
  console.error('Error uploading file:', error);
});

3. 结合上传和下载进度

如果你需要同时监控上传和下载进度，可以在同一个 axios 请求中同时使用 onUploadProgress 和 onDownloadProgress：

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percentUploaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${percentUploaded}%`);
  },
  onDownloadProgress: (progressEvent) => {
    const percentDownloaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${percentDownloaded}%`);
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

4. 显示进度条

结合进度值，你可以使用浏览器的进度条（例如 <progress> 元素）来显示进度。

<progress id="upload-progress" value="0" max="100"></progress>
<progress id="download-progress" value="0" max="100"></progress>

const uploadProgressBar = document.getElementById('upload-progress');
const downloadProgressBar = document.getElementById('download-progress');

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percentUploaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    uploadProgressBar.value = percentUploaded;
  },
  onDownloadProgress: (progressEvent) => {
    const percentDownloaded = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    downloadProgressBar.value = percentDownloaded;
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

5. 自定义进度显示

你还可以自定义进度条的显示方式，例如使用 console.log、alert 或自定义 DOM 元素显示进度。

const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    document.getElementById('upload-status').innerText = `Upload Progress: ${percent}%`;
  },
  onDownloadProgress: (progressEvent) => {
    const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    document.getElementById('download-status').innerText = `Download Progress: ${percent}%`;
  }
})
.then(response => {
  console.log('Upload and download completed!');
})
.catch(error => {
  console.error('Error occurred:', error);
});

总结

使用 onDownloadProgress 和 onUploadProgress 可以实现文件的上传和下载进度监控。
你可以根据 progressEvent 获取到 loaded 和 total 字段，计算出上传或下载的进度百分比。
可以结合浏览器的 <progress> 元素或自定义进度条来显示上传或下载的进度。
axios 提供了非常简单且直接的方式来实现文件的进度监控，适用于大文件的上传和下载场景。

通过这些方法，你可以轻松地在前端实现文件上传和下载的进度显示。

到此这篇关于javascript axios 实现进度监控的示例代码的文章就介绍到这了,更多相关js axios进度监控内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

webpack该如何打包(打包流程)
这篇文章主要介绍了webpack该如何打包及打包流程,本文通过图文示例相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2023-12-12
Bootstrap Table使用整理(一)
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能
2017-06-06
JS图片定时翻滚效果实现方法
这篇文章主要介绍了JS图片定时翻滚效果实现方法,涉及javascript结合时间函数实现页面元素动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
JavaScript中的console.profile()函数详细介绍
这篇文章主要介绍了JavaScript中的console.profile()函数详细介绍,本文讲解了console.profile()函数的浏览器支持情况、console.profile()的使用、Firebug中Profile按钮的使用等内容,需要的朋友可以参考下
2014-12-12
JavaScript 中使用SpreadJS导入和导出 Excel 文件的方法
这篇文章主要介绍了如何在 JavaScript 中使用SpreadJS导入和导出 Excel 文件,本文通过图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-09-09
利用JavaScript编写一个简单的1024小游戏
在每年的10月24日,我们都会庆祝程序员节,这是一个向所有辛勤工作、创造出无数令人惊叹应用和系统的程序员们致敬的日子,为了纪念这个特殊的日子,我们将通过编写一个简单的1024小游戏来向所有程序员们表示敬意,本文将详细解释如何使用JavaScript编写这个小游戏
2023-10-10
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
这篇文章主要给大家介绍了关于微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb的相关资料，文中通过示例代码介绍的非常详细，需要的朋友参考借鉴，下面随着小编来一起学习学习吧
2018-07-07
JS防止网页被嵌入iframe框架的方法分析
这篇文章主要介绍了JS防止网页被嵌入iframe框架的方法,结合实例形式分析了针对不同浏览器防止网页被嵌入框架的相关注意事项与操作技巧,需要的朋友可以参考下
2016-09-09
js中事件的处理与浏览器对象示例介绍
本文为大家详细介绍下js中关于简单事件的处理与浏览器对象，下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
Three.js实现3D乒乓球小游戏(物理效果)
本文将使用React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏，使用 React Three Fiber 搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
2023-03-03