Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

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

在做一个导出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))

},


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这一段整个的删掉

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
})

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...