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

好了，以上！