微信小程序 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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
BOM与DOM的区别分析
Oct 26 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
深入理解ES6中let和闭包
Feb 22 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
Vue.js实现可编辑的表格
Dec 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
简单的python后台管理程序
2017/04/13 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python 不以科学计数法输出的方法
2018/07/16 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
会话Bean的种类
2013/11/07 面试题
开会迟到检讨书
2014/01/08 职场文书
六个一活动实施方案
2014/03/21 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL