先来个简单的例子试试水
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 请求来下载数据。
好了，以上！