当前位置: 首页 > news >正文

小程序 setData,request的坑

现象:

step1:在OnLoad()函数中request数据para1,通过setData函数存入Page的data域中
step2:在同一个函数中requestpara2_By para1,会出现访问this.data.para1

重点:

第二个请求的参数依赖于第一个请求的结果

推测原因:

~~两个request请求并行进行,因此第二个request请求访问para1时它还没有被赋值~~
修正原因:查了一下资料,发现是因为request回调是异步的,执行request的同时程序往下继续执行

我的解决办法

把第二个request移到后一个生命周期函数OnReady()中,保证先获取了para1再执行后面的request

较为严谨的解决办法:

方法1:在第一个request的success回调中嵌套进行第二个请求(没有实践能不能成功)
方法2:使用Promise,介绍和教程:http://es6.ruanyifeng.com/#docs/promise https://www.cnblogs.com/xjwy/p/7813859.html

错误代码:

Page({
    data:{
        para1:'',
        para2:''
    }    
    onLoad: function (options) {
        const that = this;
        //获得para1
        wx.request({
          url: 'xxxxxxx',
          data: {},
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', },
          success: function (res) {     
            that.setData({para1:res.data.para1})//赋值
            console.log('获得para1:' + that.data.para1);//此处能够打印
          },
          fail: function (res) {}
        })
        console.log('获得para1:' + this.data.para1);//此处打印为空
        //用para1作为参数获得para2
        wx.request({
          url: 'xxxxx',
          data: {
            para1: this.data.para1//根据结果反推这里设置的参数值为空
          },
          method: 'POST',
          header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},
          success: function (res) {
            that.setData({
              para2:res.data.para2
            })
          },
          fail: function (res) {}
        })
    }
})

修改后的代码:

Page({
    data:{
        para1:'',
        para2:''
    }    
    onLoad: function (options) {
        const that = this;
        //获得para1
        wx.request({
          url: 'xxxxxxx',
          data: {},
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8', },
          success: function (res) {     
            that.setData({para1:res.data.para1})
            console.log('获得para1:' + that.data.para1);
          },
          fail: function (res) {}
        })
        console.log('获得para1:' + this.data.para1);
    }
    OnReady: function() {//【修改】把第二个请求放入新的生命周期函数
        //用para1作为参数获得para2
        const that = this;
        wx.request({
          url: 'xxxxx',
          data: {
            para1: this.data.para1//此时para1已被设置
          },
          method: 'POST',
          header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},
          success: function (res) {
            that.setData({
              para2:res.data.para2//成功获取para1映射的para2的值
            })
          },
          fail: function (res) {}
        })
    }
})

转载于:https://www.cnblogs.com/05410n/p/8778236.html

相关文章:

  • Django restfull规范
  • 微服务架构的理论基础 - 康威定律
  • python网络爬虫之三re正则表达式模块
  • ASP.NET MVC5+EF6搭建三层实例
  • 322 Coin Change 零钱兑换
  • mac 下 python 虚拟环境的安装和配置
  • 操作系统概念(一)进程,线程,多线程
  • 20165301 2017-2018-2 《Java程序设计》第七周学习总结
  • Gym101350 FMonkeying Around
  • thinkphp5项目--企业单车网站(七)
  • Go初接触之image
  • linux系统安装telnet服务
  • ztree连接数据库,实现下拉菜单
  • c++之enum的好处与 define 的区别
  • 利用itext导出PDF的小例子
  • [PHP内核探索]PHP中的哈希表
  • JS中 map, filter, some, every, forEach, for in, for of 用法总结
  • 分享的文章《人生如棋》
  • Android开源项目规范总结
  • CentOS7简单部署NFS
  • IDEA常用插件整理
  • maven工程打包jar以及java jar命令的classpath使用
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • SSH 免密登录
  • vue的全局变量和全局拦截请求器
  • 汉诺塔算法
  • 技术胖1-4季视频复习— (看视频笔记)
  • 精益 React 学习指南 (Lean React)- 1.5 React 与 DOM
  • 前端相关框架总和
  • 用 Swift 编写面向协议的视图
  • 终端用户监控:真实用户监控还是模拟监控?
  • 【干货分享】dos命令大全
  • Linux权限管理(week1_day5)--技术流ken
  • 你学不懂C语言,是因为不懂编写C程序的7个步骤 ...
  • ​HTTP与HTTPS:网络通信的安全卫士
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #Linux(权限管理)
  • #pragma 指令
  • (1)(1.9) MSP (version 4.2)
  • (html5)在移动端input输入搜索项后 输入法下面为什么不想百度那样出现前往? 而我的出现的是换行...
  • (ZT) 理解系统底层的概念是多么重要(by趋势科技邹飞)
  • (附源码)springboot 智能停车场系统 毕业设计065415
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (算法)前K大的和
  • (转)C#调用WebService 基础
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)Oracle 9i 数据库设计指引全集(1)
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • (转)使用VMware vSphere标准交换机设置网络连接
  • .Family_物联网
  • .NET Core 中的路径问题
  • .Net Core与存储过程(一)
  • .NET Framework Client Profile - a Subset of the .NET Framework Redistribution
  • .Net IE10 _doPostBack 未定义