微信小程序 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 字符串处理函数使用小结
Dec 02 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
js星星评分效果
Jul 24 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
jQuery的框架介绍
May 11 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
vue.js实现图书管理功能
Sep 24 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连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python入门教程 python入门神图一张
2018/03/05 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
物理教学随笔感言
2014/02/22 职场文书
优秀员工演讲稿
2014/05/19 职场文书
宣传标语大全
2014/07/01 职场文书
见习报告格式范文
2014/11/08 职场文书
出国签证在职证明范本
2014/11/24 职场文书
党支部书记岗位职责
2015/02/15 职场文书
通知函格式范文
2015/04/27 职场文书
入党转正申请报告
2015/05/15 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
浅析Python实现DFA算法
2021/06/26 Python
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记