如何在 Vue 实例的 beforeCreate 挂钩中进行异步调用？答案

【问题标题】：How to make an async call in a beforeCreate hook of a Vue instance?如何在 Vue 实例的 beforeCreate 挂钩中进行异步调用？
【发布时间】：2017-03-07 16:57:15
【问题描述】：

我正在构建一个带有身份验证的 Vuejs 应用程序。

当页面加载并初始化app Vuejs 实例时，我正在使用beforeCreate 挂钩来设置用户对象。我从localStorage 加载一个 JWT 并将其发送到后端进行验证。

问题在于这是一个异步调用，在调用返回验证结果之前，这个app 对象的组件（导航栏、视图等）正在使用空用户数据进行初始化。

在 promise 对象解决之前延迟子组件的初始化的最佳做法是什么？

这是我的 Vue 应用程序对象中的内容：

beforeCreate: function(){
    // If token or name is not set, unset user client
    var userToken = localStorage.userToken;
    var userName = localStorage.userName;
    if (userToken == undefined || userName == undefined) {
      StoreInstance.commit('unsetUserClient');
      // I WANT TO RESOLVE HERE
      return;
    }

    // If token and name is set, verify token
    // This one makes an HTTP request
    StoreInstance.dispatch({type: 'verifyToken', token: userToken}).then((response) => {
      // I WANT TO RESOLVE HERE
    }, (fail) => {
      // I WANT TO RESOLVE HERE
    })
  }

【问题讨论】：

标签： vue-resource vue.js vuejs2

【解决方案1】：

当前的生命周期回调是没有任何承诺/异步行为的函数。不幸的是，似乎没有办法让应用程序在您加载数据时“暂停”。相反，您可能希望在 beforeCreate 函数中开始加载并设置一个标志，显示一个带有空数据的加载屏幕/骨架，在数据加载后翻转标志，然后渲染适当的组件。

【讨论】：