526互联

axios_axios的进度显示

发布时间 2023-10-04 23:09:58作者: Steperouge
  • 在axios的配置中加入progressEvent
// 1.获取基本数据(随笔数据, 文章数据, 评论数据, 阅读量)
export const reqGetArticleBasicData = () => instance.get('/ajax/blogStats', {
  onDownloadProgress: function (progressEvent) {//axios封装的原生获取下载进度的事件，该回调参数progressEvent中包含下载文件的总进度以及当前进度
    if (progressEvent.lengthComputable) {
      //属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
      //如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
      downLoadProgress.value = progressEvent.loaded / progressEvent.total * 100 //实时获取最新下载进度
    }
  }
}).then(response => response.data
).catch(err => err)