axios 实现进度监控

在使用 axios 发送 HTTP 请求时,进度监控 非常重要,尤其是在上传或下载较大文件时。幸运的是,axios 支持通过 onUploadProgressonDownloadProgress 来监控上传和下载的进度。

1. 监控下载进度

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

javascript 复制代码
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 对象,包含上传的字节数和文件的总字节数。

javascript 复制代码
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 请求中同时使用 onUploadProgressonDownloadProgress

javascript 复制代码
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> 元素)来显示进度。

html 复制代码
<progress id="upload-progress" value="0" max="100"></progress>
<progress id="download-progress" value="0" max="100"></progress>
javascript 复制代码
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.logalert 或自定义 DOM 元素显示进度。

javascript 复制代码
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);
});

总结

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

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

相关推荐
DN金猿15 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子16 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
投笔丶从戎24 分钟前
Kotlin Multiplatform--01:项目结构基础
android·开发语言·kotlin
志存高远6628 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_41 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
杜小暑1 小时前
动态内存管理
c语言·开发语言·动态内存管理
想不明白的过度思考者1 小时前
Java从入门到“放弃”(精通)之旅——JavaSE终篇(异常)
java·开发语言
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js