刚接触小程序不久，学习的过程中，在调用小程序api成功（success）或失败（fail）的回调函数时经常遇到设置this.setData()的属性更新数据报错，通过查阅网上资料和阅读前辈们的demo了解到其中的原由以及两种解决方法，具体如下。
方法一：复制一份当前对象 var that = this;
- 代码：调用小程序 wx.getSystemInfo({}) 后，在 success 方法里直接使用this设置数据
onLoad: function () {
wx.getSystemInfo({
success: function(res) {
this.setData({ // 直接使用this设置数据
maskWidth: res.windowWidth - 30,
});
},
fail: function(err) {
console.log(err);
}
});
}
-
运行代码，这时我们发现报错了 屏幕快照 2018-05-07 上午11.01.46.png
这样修改就可以了
onLoad: function () {
var that = this; // 1. 将this对象复制到临时变量that
wx.getSystemInfo({
success: function(res) {
that.setData({ // 2. 用临时变量that调用setData()方法，进行数据更新
maskWidth: res.windowWidth - 30,
});
},
fail: function(err) {
console.log(err);
}
});
}
- 原因:
在javascript语言中，this代表着当前对象，会随着程序执行过程中的上下文而改变。在 wx.getSystemInfo({}) 方法的回调函数中，对象已经发生改变，所以已经不是 wx.getSystemInfo({}) 方法对象了，自然data里边的属性也就不复存在了。
方法二：将回调函数换一种声明方式，则可以直接使用this.setData()
onLoad: function () {
wx.getSystemInfo({
success: res => { //
this.setData({
maskWidth: res.windowWidth - 30,
});
},
fail: err => {
console.log(err);
}
});
}
注：除了上面例子外，几乎所有小程序api都有 success、fail和complete 回调函数来处理业务的后续逻辑，很多时候我们要获取当前页面对象来对视图进行渲染。当我们想要获取页面的初始数据 data时候，在回调函数里面就不能使用 this.data来获取，同样的就不能使用this.setData()函数来渲染视图。我们需要做的就是把我们想要的this对象复制到临时变量that。希望能够帮助正在学习微信小程序开发的开发者。
参考资料：
https://blog.csdn.net/mdzzzhangxian/article/details/60966040
