在created()生命周期挂钩中的vue异步调用

时间:2019-12-12 18:31:39

标签: vue.js vuejs2

我需要在created()中调用以下方法。为此,我需要将created()设置为async。根据Vue文档,created()被称为同步await上的Vue Framework created()是否会避免出现任何竞争情况?

this.isAuthenticated = await authService.isAuthenticated();

1 个答案:

答案 0 :(得分:1)

Vue.config.productionTip = false;

function tm(ms, msg) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(msg);
    }, ms);
  });
}

new Vue({
  async beforeCreate() {
    console.log(await tm(1000, "BEFORE CREATE"));
  },
  async created() {
    console.log(await tm(2000, "CREATED"));
  },
  async beforeMount() {
    console.log(await tm(3000, "BEFORE MOUNT"));
  },
  async mounted() {
    console.log(await tm(4000, "MOUNTED"));
  }
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>