微信小程序 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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
Bootstrap布局方式详解
May 27 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
脚本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调用三种数据库的方法(1)
2006/10/09 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
php合并js请求的例子
2013/11/01 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
Vue中插入HTML代码的方法
2018/09/21 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
开始着手第一个Django项目
2015/07/15 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python全栈知识点总结
2019/07/01 Python
基于Pytorch SSD模型分析
2020/02/18 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
技能比赛获奖感言
2014/02/14 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年采购部工作总结
2014/11/20 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android
Redis实战高并发之扣减库存项目
2022/04/14 Redis
带你了解Java中的ForkJoin
2022/04/28 Java/Android