vue中无法在页面渲染前修改一个后台返回的数据

Question

项目中有个列表，该列表包含了一个用户的ID,

现在由于某个曹丹的原因后台无法同时在这个接口中提供该用户的姓名，只是提供了一个查询用户信息的接口，

data(){
    return{
        page:1,
        formData:{},
        tableData:[]
    }
},

created(){
    let _this = this
    this.getList(this.page,this.formData).then(res=>{
        res.data.forEach(item=>{
            if(item.userId){
                _this.getUserName(item.userId).then(items=>{
                    item.nickName = items
                })
            }
            _this.tableData = res.data
            //打印的tableData中包含了已经获取到的昵称信息
            console.log(_this.tableData)
        })
    })
},

methods:{
    //获取列表数据
    getList(page,formData){
        return new Promise((resolve,reject)=>{
            this.axios('url',formData).then(res=>{
                if(res.success){
                    resolve(res.data)
                }else{
                    reject()
                }
            })
        })
    },
    //通过ID获取用户昵称
    getUserName(id){
        return new Promise((resolve,reject)=>{
            this.axios('url?id='+id).then(res=>{
                if(res.success){
                    resolve(res.data.userBasic.nickName)
                }else{
                    reject()
                }
            })
        })
    }
}

我这么写了之后发现数据获取在渲染之后，

尝试过在mounted中使用$nextTick()调用同样无法在渲染前获取，

这是为什么，该怎么处理

Answer 1

这确实是个操蛋的数据组装方式,你上面的问题在于 getUserName 是个异步请求，可以试试以下方式

created(){
    let _this = this
    this.getList(this.page,this.formData).then(res=>{
        res.data.forEach(async (item) => {
            if(item.userId){
                const userName =  await _this.getUserName(item.userId)
                item.nickName = userName
            }
        })
         _this.tableData = res.data
         console.log(_this.tableData)
    })
},

Answer 2

页面较快渲染，然而接口数据没有回来；
这个建议页面加个loading；
然后在跟节点showPage数据回来前让页面隐藏；
`

<div v-if="showPage">
</div> 

`