javascript - 创建方法中的异步/等待 - Vue 2

Question

我有 vue-element-loading 包，在我的 page.vue 中添加了它的组件:

<vue-element-loading :active="isActive" :is-full-screen="true"/>

向数据添加变量:

data () {
  return {
    isActive: false,
  }
}

然后在页面加载完成时触发 isActive 为 true:

async created () {
  this.isActive = true
  await this.fetchData()
  this.isActive = false
}

fetchData 是一个带有响应的 axios get 请求。想法是显示加载程序，直到 axios 正确触发并获得响应。但是现在，我的加载程序显示 0.1 毫秒，然后消失。

这是 fetchData 方法:

fetchData () {
  axios.get(globalConfig.OFFERS_URL)
    .then((resp) => {
      this.offersData = resp.data
      console.log(resp)
    })
    .catch((err) => {
      console.log(err)
    })
},

Answer 1

看起来你的 fetchData() 没有从对 axios.get() 的调用中返回 Promise，所以 awaiting 它将立即解决(即，在 axios.get() 完成之前)。

修复方法是返回 axios.get() 的结果:

fetchData() {
  return axios.get()
           .then(/*...*/)
           .catch(/*...*/);
}