微信小程序 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 相关文章推荐
js下将字符串当函数执行的方法
Jul 13 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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 工厂模式使用方法
2010/05/18 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
The North Face北面英国官网:美国著名户外品牌
2017/12/13 全球购物
类如何去实现接口
2013/12/19 面试题
主持人演讲稿范文
2013/12/28 职场文书
理工大学毕业生自荐信范文
2014/02/22 职场文书