Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.5k views
in Technique[技术] by (71.8m points)

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

项目中有个列表,该列表包含了一个用户的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()调用同样无法在渲染前获取,

这是为什么,该怎么处理


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

这确实是个操蛋的数据组装方式,你上面的问题在于 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)
    })
},

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...