axios onDownloadProgress和onUploadProgress配置進度條

先來個簡單的例子試試水

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 請求來下載數據。

好了，以上！