微信小程序 this和that详解及简单实例

[复制链接]
查看1061 | 回复3 | 2018-2-5 19:13:46 | 显示全部楼层 |阅读模式
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:
[list=1]
[*]var that=this;//把this对象复制到临时变量that
[/list]
[i]复制代码[/i]

在success回调函数中使用that.data就能获取到数据了。
不过,还有另外一种方式,也很特别,是将success回调函数换一种声明方式,如下:
[list=1]
[*]success: res =>{
[*]  this.setData({
[*]      loadingHidden: true,
[*]      hideCommitSuccessToast: false
[*]  })
[*]}
[/list]
[i]复制代码[/i]

在这种方式下,this可以直接使用,完全可以获取到data数据。

再给一个完整的例子:
[list=1]
[*]success: res => {
[*]  if (res.data.code != 0) {
[*]   // 提交失败
[*]   this.setData({
[*]    loadingHidden: true,
[*]    hiddenTips: false,
[*]    tipsContent: res.data.message
[*]   })
[*]  } else {
[*]   // 提交成功
[*]   this.setData({
[*]    loadingHidden: true,
[*]    hideCommitSuccessToast: false
[*]   })
[*]   subBtn = false;
[*]
[*]   // 定时,3秒消失
[*]   setTimeout(() => {
[*]    this.setData({
[*]     hideCommitSuccessToast: true
[*]    })
[*]    wx.navigateBack({ delta: 2 });
[*]   }, 2000);
[*]
[*]  }
[*]}
[/list]


回复

使用道具 举报

haiyuezhihun | 2021-3-9 10:35:00 | 显示全部楼层
找了好多地方,终于找到了
回复

使用道具 举报

困虫斗倜 | 2022-6-3 01:34:34 | 显示全部楼层
祝愿悟空源码越办越好!
回复

使用道具 举报

简0 | 2023-2-17 04:20:11 | 显示全部楼层
5kym.cn这个站资源太全了
回复

使用道具 举报

钟情695 | 2023-9-2 21:51:13 | 显示全部楼层
悟空源码太厉害,资源真多!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则