问题:在使用for循环的同时,在内部使用wx.request发送get或者post请求,会导致异步请求存储数据。由于我对微信小程序的应用不是很熟练,并且微信小程序并不像vue那么好使。所以使用异步转同步的方式解决问题。
方案:
1,创建两个数组,这里分别是 user 和userHead
data: {
hotData: [],
userHead: [],
user: []
},
2,在methods中创建两个方法getRoomList和getUserHead
其中getRoomList是请求第一组数据,该数据是异步一次性获取,而getUserHead是在getRoomList请求完成之后触发函数调用。
getRoomlist() {
wx.request({
url: 'http://127.0.0.1:3000/x/web-interface/ranking',
data: {
rid: 119,
day: 3
},
method: 'GET',
success: (res) => {
wx.stopPullDownRefresh();
console.log(res);
this.setData({
hotData: res.data.data.list,
});
console.log(this.data.hotData)
this.getUserHead();
}
});
},
getUserHead() {
// 获取用户头像 使用异步转同步的方法
for (let i = 0; i < this.data.hotData.length; i++) {
let s = new Promise((resolve, reject) => {
wx.request({
url: 'http://127.0.0.1:3000/x/web-interface/userid',
method: 'GET',
data: {
uid: this.data.hotData[i].mid
},
method: 'GET',
success(res) {
resolve(res.data.data.card.face)
},
fail(err) {
reject(err)
}
})
});
this.data.userHead.push(s);
this.setData({
userHead: this.data.userHead,
});
};
this.data.user.length = this.data.userHead.length;
for (let j = 0; j < this.data.userHead.length;j++){
this.data.userHead[j].then(v=>{
this.data.user[j] = v;
this.setData({
user: this.data.user,
});
})
}
}
3,getUserHead方法,将异步获取的数据转化为同步获取,这样数据的index值所对应的数据不会出错
第一步:通过for循环和wx.request获取数据**(此时已经出错,我发现请求的数据的index与原来的数据index值不匹配)**,
第二步:解决不匹配问题,上网查询得知使用promise
for (let i = 0; i < this.data.hotData.length; i++) {
let s = new Promise((resolve, reject) => {
wx.request({
url: 'http://127.0.0.1:3000/x/web-interface/userid',
method: 'GET',
data: {
uid: this.data.hotData[i].mid
},
method: 'GET',
success(res) {
resolve(res.data.data.card.face)
},
fail(err) {
reject(err)
}
})
});
}
通过在控制台打印可以看出s是一个promise类型的数据,通过网上搜索得知,promise类型内的数据并不能直接获取,必须通过then()才可以拿到数据。于是我将所有同步获取的数据存入userHead数组内。
for (let i = 0; i < this.data.hotData.length; i++) {
let s = new Promise((resolve, reject) => {
wx.request({
url: 'http://127.0.0.1:3000/x/web-interface/userid',
method: 'GET',
data: {
uid: this.data.hotData[i].mid
},
method: 'GET',
success(res) {
resolve(res.data.data.card.face)
},
fail(err) {
reject(err)
}
})
});
this.data.userHead.push(s);
this.setData({
userHead: this.data.userHead,
});
};
this.data.userHead.push(s);
this.setData({
userHead: this.data.userHead,
});
存入之后发现无法直接调用,尝试之后,利用for循环加then()方法来解析
this.data.user.length = this.data.userHead.length;
for (let j = 0; j < this.data.userHead.length;j++){
this.data.userHead[j].then(v=>{
this.data.user[j] = v;
this.setData({
user: this.data.user,
});
})
}
之后就可以拿到同步的数据了。