uniapp函数里面的this指向问题

问题描述：
我们用uni.request请求时，发现获取到的数据无法被赋值给了data绑定的参数，例：
编写逻辑

data(){ 
   
return{ 
   
msgData:[]
}
}

方法：

getDataList:function(id){ 
   
var data={ 
   
"userid":id
};
uni.request({ 
   
url: '192.168.0.131/user/',
data: data,
method: 'post',
header: { 
   
'content-type': 'application/x-www-form-urlencoded',
},
success:function(res){ 
   
if(res.data.code=="success"){ 
   
console.log(res.data);
this.msgData = res.data
}
console.log(this.msgData);
}
}
})
}

数据渲染：

<view>
<div v-for="item in msgData" :key="item.id">
<image v-bind:src="'192.168.0.131/static/img/'+item.src"></image>
<span>{ 
   { 
   item.data}}</span>
</div>
</view>

结果：
在请求成功后打印出msgData的类型是undefined，
在后面也能打印出this.msgData也是添加数据成功后的数组。也就是数组内容更新了，但是页面没有同步更新。

处理方法：
因为进入request请求体后this不再是我们所认识的this了，所以我们需要在request请求前面增加变量代替this。

修改后的方法：

getDataList:function(id){ 
   
var that = this;
var data={ 
   
"userid":id
};
uni.request({ 
   
url: '192.168.0.131/user/',
data: data,
method: 'post',
header: { 
   
'content-type': 'application/x-www-form-urlencoded',
},
success:function(res){ 
   
if(res.data.code=="success"){ 
   
console.log(res.data);
that.msgData = res.data
}
console.log(that.msgData);
}
}
})
}

果然，request请求体内的this并非我们所需的this，如果需要继续使用this来获取data内声明的变量，那么除了上面所说的that转存this之外，还可以通过bind方法将this绑定。

在success的回调函数后使用bind（this）：

success:function(res){ 
   
if(res.data.code=="success"){ 
   
console.log(res.data);
this.msgData = res.data
}
console.log(this.msgData);
}
}.bind(this)

这也就可以使用this进行调用了。

今天的文章uniapp函数里面的this指向问题分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。