现象:
step1:在OnLoad()
函数中request
数据para1,通过setData
函数存入Page的data域中
step2:在同一个函数中request
para2_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) {}
})
}
})