利用promise解决vue异步请求问题

用VUE做项目首页功能，设想的步骤是页面异步请求加载菜单，由于刚加载的时候路径是“/”,所以没有对应的路由显示页面，这样就会导致用户体验很差，所以就判定在路径为‘/’的时候，默认匹配到菜单的第一个子节点。代码如下

loadMenu: function (user) {
        let me = this;
        me.$store.commit('setUser', user);
        me.$http.get('./svc/role/menu').then(function (res) {
          me.menus = res.data;
        }).catch(err => {
            console.log("菜单加载失败");
          }
        );
        let path = me.$route.fullPath;
          if (path == '/') {
            me.$router.push(me.menus[0].children[0].url);
          }
      }

这时候刷新页面发现还是不可以，于是就在控制台打印meaus的值，发现是undifined。这个时候我就想到了异步加载的机制是发生在页面加载后的，所以这个时候是获取不到数据的。自然而然的就想到了要用同步，当时百度了一下发现axios并不能像ajax那样加一个asyn的字段就可以实现同步，那么只能通过promise回调的方式等异步加载完成后，确认成功再执行后面的操作。更新后的代码如下：

     loadTree:function(){
        return new Promise(((resolve, reject) => {
          this.$http.get('./svc/role/menu').then((res)=>{
            resolve(res.data)
          }).catch(function (error) {
            reject(error)
          })
        }))
      },
      loadMenu: function (user) {
        let me = this;
        me.$store.commit('setUser', user);
        me.loadTree().then(res=>{
          me.menus = res;
          console.log(res);
          let path = me.$route.fullPath;
          if (path == '/') {
            me.$router.push(me.menus[0].children[0].url);
          }
        },error=>{
          console.log(error);
        })
      }

这里定义了一个函数，返回的是Promise函数，在loadMenu方法中调用该函数，利用promise的then属性返回请求成功的值，再把值赋给meaus。