在封装的axios中增加onDownloadProgress进度条的处理

        vue项目中一直未使用进度条，现在下载功能中，需要实现进度条的功能。找了下资料，可以在axios的钩子中加入onDownloadProgress，进行处理即可。由于axios已经进行了封装，那如何修改呢？

        查看自己封装的axios为http,其定义的参数可以继续进行添加，所以就加入了onDownloadProgress，并将处理的方法downloadProgress作为参数处理，：

export function exportData(params,downloadProgress){
    return http({
      url: api.exportexceldata,
      method: 'post',
      data: params,
      responseType:'blob',
      onDownloadProgress: function (progressEvent) {
        downloadProgress(progressEvent)
      },

  })
}

使用该api时，可以简单定义一个方法,

 showProgess(progress){
        this.percent = progress.loaded / progress.total
 },
 downloadFile(id){
      this.percent=0
      ...
      let that=this
      exportData(option,that.showProgess).then((res)=>{ // 此处调用
...
})

然后html页面中定义progress组件即可了。

<a-progress  :percent="percent" :showInfo="false"/>

通过以上方法就能实现简单的下载进度的展示了。