今天实现的是根据文章id来调取两个接口的数据,这里面就有异步问题,因为获取数据的请求都属于异步方法,异步方法对程序的影响就是,我可以先执行但是我在执行的过程中也允许别人执行,所以按照正常的同步写法会产生一些接不到值,或者接到的值太晚了而报错的问题。
解决方法: async 和 await
async await基础讲解
onLoad: function(options) {
this.articleid=options.id
this.yibuGetList();
uni.showLoading({
title: '加载中...'
})
setTimeout(function() {
uni.hideLoading();
}, 1000);
},
methods: {
async yibuGetList(){
// 再调取评论信息
await this.$http.post('article/getComments',{
id:this.articleid,
})
.then(res=>{
if(res.code==1){
this.comm=res.data
var _this=this;
this.$nextTick(function(){
_this.somshow = true;
})
}
})
//先调取文章详情信息
await this.$http.post('article/getDetail', {
id:this.articleid
})
.then(res => {
if(res.code==1){
this.prolist = res.data.data.goods
this.article = res.data.data
}
})
},
}
控制台可以将一异步方法里面的内容全都打印出出来
下一步,解决没等到值先渲染了得问题
利用v-if的重新渲染机制
就是没有得到值得时候就不传值给组件来渲染
因为我获取的值还要给子组件传值,就在子组件上加上v-if判断,等到真的有值给comments组件了再去渲染。这样就避免了子组件里面无值报错的问题。
data中定义 someshow:false
<comments :comm='comm' v-if="somshow" class="commonts"></comments>
总结:对v-if有了新的认识,控制组件或者标签的显示与否,就是控制渲染问题,控制住了组件的生命周期。同时v-if对于绑定的值是实时监听的特点,有值就会展示出来。