• 小程序 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) {}
            })
        }
    })
    
  • 相关阅读:
    Python 多线程就这么简单
    Linux中使用SecureCRT上传、下载文件命令sz与rz用法实例
    LAMP第四部分 mysql相关
    LAMP第三部分php配置和mysql配置
    LAMP第二部分apache的配置
    LAMP第一部分安装mysql -apache -php
    LAMP总四部分
    用户和组管理
    系统操作命令
    2017网易---统计回文
  • 原文地址:https://www.cnblogs.com/05410n/p/8778236.html
Copyright © 2020-2023  润新知