求助element-ui loading组件异步关闭的问题

Question

在做一个导出excel的功能时，由于后端返回文件流需要的时间较长就使用了element的loading组件。但是遇到的问题是在后台返回结果前loading组件的close方法就已经执行了。因为是新手代码写的可能有很大问题，求指正
相关代码：

import { Loading } from 'element-ui'

handleExport() {
  let loadingInstance = Loading.service({ fullscreen: true, text: '正在处理，请稍后...', lock:true })
  this.checkAlloptions = this.checkedBasicInfo.concat(this.checkedDetailedOptions)
  const params = {
    memberGridSearch: this.queryCondition,
    exportFiledList: this.checkAlloptions
  }
  // 查询所有Node
  // params.memberGridSearch.searchAllNodes = 1
  new Promise((resolve, reject) => {
    this.$commonFn.downloadCsvPost(this.downUrl, params)
    resolve()
  }).then(() => {
    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      loadingInstance.close()
    })
    this.dialogVisibleExport = false
  })
}

这个是我下载方法的代码，原生写的：
downloadCsvPost(url, params) {
let baseURL = process.env.BASE_API
url = baseURL + url
let xhr = new XMLHttpRequest()
xhr.open('post', url, true)
xhr.setRequestHeader('ACCESS-TOKEN', getToken())
xhr.responseType = 'blob'
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json')
// let formData = new FormData()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    if (xhr.response.type === 'application/csv') {
      // loadingInstance.close()
      const blob = new Blob([xhr.response])
      let url = window.URL.createObjectURL(blob)
      // 创建一个a标签元素，设置下载属性，点击下载，最后移除该元素
      let link = document.createElement('a')
      link.href = url
      link.style.display = 'none'
      // 取出下载文件名
      let fileName
      if (xhr.getResponseHeader('content-disposition')) {
        fileName = decodeURI(xhr.getResponseHeader('content-disposition').split(';')[1].split('=')[1])
      } else {
        fileName = new Date().getTime().toString() + '.xls'
      }
      link.setAttribute('download', fileName)
      link.click()
      window.URL.revokeObjectURL(url)
    } else {
      Message.error({
        message: '无符合条件数据',
        type: 'error',
        duration: 2 * 1000
      })
    }
  }
}
xhr.send(JSON.stringify(params))

},

Answer 1

这一段整个的删掉

new Promise((resolve, reject) => {
    this.$commonFn.downloadCsvPost(this.downUrl, params)
    resolve()
  }).then(() => {
    this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
      loadingInstance.close()
    })
    this.dialogVisibleExport = false
  })

换成下面的：

this.$commonFn.downloadCsvPost(this.downUrl, params).then(() => {
    loadingInstance.close()
    this.dialogVisibleExport = false
})

Answer 2

因为resolve()比你的接口先执行了