一、注意this的变化
在开发小程序的过程中,经常出现 在页面加载时向后台请求数据,并用this.setData来更
新页面的情况。如下示例代码
Page({
data: {
posts: []
},
onLoad: function (options) {
//注意: 在下面获取数据库数据的api的回调函数中,this会变,因此要在此处将当前的this保存下来
var that = this;
console.log("onLoad");
const db = wx.cloud.database({
env: "activity-assistant-1065dc"
});
const posts = db.collection('posts');
db.collection('posts').get({
success(res) {
// res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条
console.log(res.data);
that.setData({
posts: res.data
})
}
})
},
})
请看注释中提示注意的代码。
为什么要用that来保存this呢?
这是因为,我们需要在success这个回调函数中使用this.setData。但是在success这个回调函数中this所指对象已经发生了变化,不再是页面对象,不妨用console.log(this)打印一下看看。
因此,为了顺利更新页面的data,我们需要先用that保存this即页面对象。