小程序 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