天天看点

两个异步方法同时执行+解决没有获取值而先渲染的问题

今天实现的是根据文章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

总结:对v-if有了新的认识,控制组件或者标签的显示与否,就是控制渲染问题,控制住了组件的生命周期。同时v-if对于绑定的值是实时监听的特点,有值就会展示出来。