遇到问题
首先简述一下自己在开发是遇到的问题(下图已清晰描述):
解决问题
如果有用的话,不如一键三连,嘿嘿
既然知道了问题的出现的原因所在,那么就寻找解决问题的办法,在网上搜索了之后看到了下面的这篇文章帮助了我解决了我的问题。
文章链接:博主pig-weiwei的文章:微信小程序 异步转同步,promise,for循环加request异步解决方案
自己也通过这篇文章对promise进行了学习和对代码进行了改进(发现自己原来不会的这么多hhhh),下面是对代码的改进,主要改变在getQuestion函数,代码上有注解,是我自己对程序的理解,如果有写错的地方请在评论区帮我指正!
data: {
list:[],
shuzu:[],
shuzu1:[],
show: false,
count: 0,
questions: [],
wenti: "",
content: "",
openid: app.globalData.openid,
},
onLoad() {
var that = this;
this.getQuestion();
console.log(app.globalData.openid);
wx.cloud.callFunction({
name: "openapi",
success: function (res) {
console.log("openid", res.result.openid);
that.setData({
openid: res.result.openid,
});
app.globalData.openid = res.result.openid;
console.log(app.globalData.openid);
},
fail: function (res) {
console.log("失败:" + res);
},
});
},
//改进的地方主要在这个函数和data里面多了几个变量
getQuestion() {
var that = this;
wx.request({
url: app.globalData.host + "/getQuestion",
success(res) {
that.setData({
questions: res.data,
});
console.log(res.data);
for (let i = 0; i < res.data.length; i++) {
//使用这种办法得到一个promise对象
let s = new Promise((resolve, reject) => {
wx.request({
url: app.globalData.host + "/getAnswerByQId",
data: {
question_id: res.data[i].question_id,
},
success(req) {
resolve(req.data[0])
},fail(err){
reject(err)
}
});
})
//而因为promise是同步的,他会当这个for循环里面的promise折行完成后才去折行下面的内容,
//所以不会出现因为请求时间问题导致的数据错乱问题
that.data.shuzu.push(s);
console.log(that.data.shuzu)
that.setData({
shuzu1: that.data.shuzu,
});
};
//promise是储存异步请求的结果,可以通过then获得,then是异步操作。
that.data.list.length = that.data.shuzu1.length;
for (let j = 0; j < that.data.shuzu1.length;j++){
//既然then是异步操作,那为什么下面这段代码赋值不会错乱呢?
//原因是,此循环是通过赋值特定的数组的位,所以不会造成数据错乱,算做是一种程序的巧妙设计吧
that.data.shuzu1[j].then(v=>{
that.data.list[j] = v;
that.setData({
list: that.data.list,
});
})
}
},
});
},