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


Posted in Javascript onFebruary 13, 2017

微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend。原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了。官方的解决办法是,复制一份当前的对象,如下:

var that=this;//把this对象复制到临时变量that

在success回调函数中使用that.data就能获取到数据了。

不过,还有另外一种方式,也很特别,是将success回调函数换一种声明方式,如下:

success: res =>{
  this.setData({
      loadingHidden: true,
      hideCommitSuccessToast: false
  })
}

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

再给一个完整的例子:

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);

    }
   }

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
Vue调试神器vue-devtools安装方法
Dec 12 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
IE11下处理Promise及Vue的单项数据流问题
Jul 24 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
jQuery实现大图轮播
Feb 13 #Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 #Javascript
你真的了解BOM中的history对象吗
Feb 13 #Javascript
You might like
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
2017/09/30 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python中模块的__all__属性详解
2017/10/26 Python
Python内建模块struct实例详解
2018/02/02 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国玩具公司:U.S.Toy
2018/05/19 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
周年庆典主持词
2014/04/02 职场文书
小学生环保倡议书
2014/05/15 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
golang 实用库gotable的具体使用
2021/07/01 Golang