阅读 21

axios // onDownloadProgress和onUploadProgress配置进度条

先来个简单的例子试试水

axios({
  url: 'https://www.***.com/***.png',
  method: 'get',
  onDownloadProgress (progress) {
    console.log(Math.round(progress.loaded / progress.total * 100) + '%');
  }
})
复制代码

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

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

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

const httpPost = (URL, params, config = {}) => {
  return axios({
    url: URL,
    method: 'post',
    data: {
      ...params
    },
    ...config
  })
}
复制代码

在其他地方使用这个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