create() 生命周期钩子中的 vue 异步调用

fro*_*sty 9 vue.js vuejs2

我需要在created(). 为此,我需要制作created()as async。根据 Vue 文档,created()称为synchronously。Vue 框架会await避免created()任何竞争条件吗?

this.isAuthenticated = await authService.isAuthenticated();
Run Code Online (Sandbox Code Playgroud)

Gan*_*der 6

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");
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Run Code Online (Sandbox Code Playgroud)

  • 我认为这实际上根本不是异步的。“tm”调用几乎同时发生,但输出间隔 1 秒。所以,它只显得异步。 (6认同)
  • 是的,你可以这样做,问题是:那些没有等待。所以这是一个有点误导的答案。我也看到人们使用网络组件来做到这一点。拥有异步函数和等待其完成不是一回事。事实上,您可以将异步函数放在任何地方,只是有时会产生意想不到的结果,即当调用者没有预料到因此没有等待它时。 (2认同)