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