创建方法中的异步/等待 - Vue2

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

- Alexander Kim

---

axios只是返回缓存结果吗？那会非常快。 - Mark

@MarkMeyer，我已经添加了我的方法，它是否有缓存？ - Alexander Kim

Answer 1

看起来你的fetchData()没有返回从调用axios.get()得到的Promise，所以await它会立即解决（即在axios.get()完成之前）。

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

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

- tony19

---

谢谢，现在它运行正常了。在我这种情况下使用 return 有什么不好的地方吗？Promise 后面是 .then 对吧？通过返回 promise，每个人都是指要确切地使用 return 语句吗？ - Alexander Kim

我的意思是，我仍然不理解js中Promise的概念，你能用简单的话来解释一下吗？ - Alexander Kim

请查看Promise文档。 - tony19