uniapp使用uni.request获取后端数据并渲染 | 含如何处理获取到数据无法渲染问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用uni.request获取后端数据并渲染 | 含如何处理获取到数据无法渲染问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题描述：在uniapp中使用uni.request获取后端数据并渲染，但是获取到了数据无法进行全局赋值。

data() {
	return {
		array:[]
	};
},
	
onLoad() {
	this.updateData();
}

updateData(){
	uni.request({
		url:'*****',
		data:{},
		header:{'Content-Type':'application/x-www-form-urlencoded'},
		success:(res)=>{
			console.log(res)
			let data = res.data;                    
			this.array = data;     // 在此步可以获取到数据         
		}, 
		fail: () => {
			uni.showToast({
				icon: 'none',
				title: '网络异常,请稍后重试'
			});
		}
	}); 
		this.useData();			// 调用方法
	}
}	

useData(){
	console.log(this.array);	// 在此步获取到的数据为初始数据
}

造成数据无法全局赋值的原因主要是：uni.request是异步请求，此时打印出来的值，其执行机制是：useData方法再到uni.request。
如果需要调用函数并渲染到全局，则需要在更改方法的放置位置。

updateData(){
	uni.request({
		url:'*****',
		data:{},
		header:{'Content-Type':'application/x-www-form-urlencoded'},
		success:(res)=>{
			console.log(res)
			let data = res.data;                    
			this.array = data;     // 在此步可以获取到数据  
			this.useData();		   // 在异步进行调用方法       
		}, 
		fail: () => {
			uni.showToast({
				icon: 'none',
				title: '网络异常,请稍后重试'
			});
		}
	}); 
		
	}
}

附：箭头函数指向问题文章来源地址https://www.toymoban.com/news/detail-523222.html

使用this直接赋值的方法

	uni.request({
		  ...
		  success: (res) => {
			this.data = res.data;	//若使用箭头函数则可以进行赋值
		  },
		  fail: (err) => {
		    console.error(err);
		  },
		});

使用that来间接赋值的方法

let that = this; 
uni.request({
		  ...
		  success: function(res){
			that.data = res.data;	//使用that来间接赋值
		  },
		  ...
		});

解释：如果success直接写成普通函数的形式，打印出来的this是success函数自身。而将success修改为箭头函数即可拿到Vue实例对象的数据并进行赋值及渲染到页面上。
区分：如果是箭头函数，this的指向是上下文作用域，不可能指向对象；如果是普通函数或方法，this指向上一个作用域的this或者调用这个方法的对象。

到了这里，关于uniapp使用uni.request获取后端数据并渲染 | 含如何处理获取到数据无法渲染问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！