微信小程序 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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python3 max()函数基础用法
2019/02/19 Python
python读写csv文件实例代码
2019/07/05 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python global和nonlocal用法解析
2020/02/03 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
入学生会自荐书范文
2014/02/05 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS