微信小程序 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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
脚本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 array_intersect()函数使用代码
2009/01/14 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Django如何配置mysql数据库
2018/05/04 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
Pandas分组与排序的实现
2019/07/23 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
django在开发中取消外键约束的实现
2020/05/20 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
善意的谎言事例
2014/02/15 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
经销商订货会主持词
2014/03/27 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
二手房购房协议书范本
2014/10/05 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS