vue.js 如何确保在异步获取成功之后，才进行页面渲染？

Question

问题描述

背景：
vue.js项目中，需要异步请求获取配置，这个配置在很多页面都会用到。

详细描述：
验证登录信息之后，需要向服务端请求一些配置项，这份配置是一些字段定义，如：

{
    "config": {
        "x": 1,
        "y": 2
    }
}

那么，如何确保在异步请求成功获取之后，才进行页面渲染？

Answer 1

那你等数据请求完之后再去挂载不就行了？类似这样的：

ajax({
    success:function (){
        new Vue({
            el:'#app',
            ...
        })
    }
})

Answer 2

1. this.$nextTick
2. es6的async函数
3. 使用v-cloak;
   参考官网https://cn.vuejs.org/v2/api/#...
   且请求方法写在create里面

Answer 3

vue-router 可以先请求再进行导航
vue-router 数据获取

Answer 4

创建一个Promise进行请求

function getConfig() {
    return new Promise((resolve, reject) => {
        // 伪代码
        1. ajax获取配置信息 configInfo 。
        2. 成功后`resolve configInfo` 。
        3. 失败后`reject`。
    })
}

异步函数中等待Promise执行成功，进行页面渲染

(async () => {
    let config = await getConfig()
    // 伪代码
    1. 成功根据`config`渲染页面。
})()