axios onDownloadProgress和onUploadProgress配置进度条

2022-04-28 12:35:17 阅读：287 来源： 互联网

标签：onUploadProgress axios 请求 get 进度条 onDownloadProgress progress post

先来个简单的例子试试水

1 axios({
2   url: 'https://www.***.com/***.png',
3   method: 'get',
4   onDownloadProgress (progress) {
5     console.log(Math.round(progress.loaded / progress.total * 100) + '%');
6   }
7 })

上面的代码添加了一个简单的axios请求，使用get方法请求一张图片，然后以百分比的形式打印出我们从服务器下载这张图片的进度，大家可以把 url 参数换成一张比较大的图片链接试试。

用了上面的例子应该就对这个下载请求进度调有所掌握了，但我们经常是将axios封装之后使用的，如果是这样该怎么添加进度条呢？也很简单，看下面例子

先使用 axios 定义post 请求，并将第三个参数作为配置项传入

 1 const httpPost = (URL, params, config = {}) => {
 2   return axios({
 3     url: URL,
 4     method: 'post',
 5     data: {
 6       ...params
 7     },
 8     ...config
 9   })
10 }

在其他地方使用这个post请求并添加进度条

httpPost('http://hah.com', {}, {
  onUploadProgress (progress) {
    console.log(Math.round(progress.loaded / progress.total * 100) + '%');
  }
})

可以看到这里用的是 onUploadProgress ，为什么呢？也很简单，我们平时是使用 post 请求来上传数据，使用 get 请求来下载数据。

好了，以上！

转自：https://www.cnblogs.com/blackbentel/p/10981516.html

标签：onUploadProgress,axios,请求,get,进度条,onDownloadProgress,progress,post
来源： https://www.cnblogs.com/javalinux/p/16202351.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

axios onDownloadProgress和onUploadProgress配置进度条