问题描述：在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: '网络异常,请稍后重试'
});
}
});
}
}
附：箭头函数指向问题
- 使用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或者调用这个方法的对象。