vue结合axios实现下载进度条

封装的post请求config是重点export function post(url, data = {},config = {}) {return new Promise((resolve, reject) => {axios.post(url, data,config).then(response => {if (response...

bug的生产者

9449人浏览 · 2019-08-29 16:45:08

bug的生产者 · 2019-08-29 16:45:08 发布

封装的post请求
config是重点

export function post(url, data = {},config = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data,config)
      .then(response => {
        if (response) {
          resolve(response.data);
        } else {
          router.push({
            path: '/'
          })
        }
      }, err => {
        // reject(err);
      })
  })
}

代码中实现（ui样式可以随便参考一下其他的）
$nextTick实现dom的异步刷新，具体见这个链接简单理解Vue中的nextTick

      post("/merchant/v1/account/queryMerchantAccountDetail", data, {
        onDownloadProgress(a) {
          var percent = parseInt(100 * (a.loaded / a.total));
          _this.$nextTick(() => {
            _this.progressNum = percent;
          });
        }
      }).then(response => {
        if (response.data) {
          this.excelData = response.data.results[0].list;
          this.outExe5();
        }
      });