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

11 篇文章 2 订阅
2 篇文章 0 订阅
本文探讨了在Vue应用中如何使用async/await处理异步请求,以避免数据延迟导致的错误。通过在获取文章详情和评论信息时使用await确保数据按序获取。同时,利用v-if对组件渲染进行控制,只有当数据准备好后才显示子组件,防止因为空值引发的错误。这一方法深化了对v-if作为渲染控制手段的理解,有效解决了数据延迟与组件渲染同步的问题。
摘要由CSDN通过智能技术生成

今天实现的是根据文章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对于绑定的值是实时监听的特点,有值就会展示出来。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值