for循环中嵌套了异步请求会导致顺序错乱
简单明了的例子:
//for中嵌套异步时,执行顺序会混乱
function forTest(){
for(var i=0; i<5; i++){
(function(j){
setTimeout(function(){
console.log("第"+(j+1)+"次循环");
}, Math.random() * 3000);
}(i));
}
}
forTest();
//第5次循环
//第2次循环
//第3次循环
//第4次循环
//第1次循环
我是在打开某个页面时就发出一个ajax请求,获取一些数据后,再用这些数据的id再次发送请求获取数据。由于获取的数据都是list,所以需要循环发送ajax请求。
前端用的Vue.js
created: function () {
axios.get('../../WeChatMaterial/recommendationItem/list?'+'currentPage=1')
.then(function (response) {
var respData = response.data;
if (respData.result === 'ok') {
app.user_display = respData.userDisplay;
app.items = respData.data.list;
app.total_page = respData.data.pages;
app.current_page = respData.data.pageNum;
//遍历respData.data.list中的id
getGoodsList(0,app.items.length);
function getGoodsList(j,length) {
var id = app.items[j].id;
axios.get('../../WeChatMaterial/goodsList?id=' + id)
.then(function (response) {
var goodsList = response.data;
app.goodsList.push(goodsList);
if(++j < length) {
getGoodsList(j, length);
}
});
}
}
});
},
html:
<tbody id="tableMaterial">
<tr v-for="(item,index) in items">
<td>{{item.id}}
<span @click="jsCopy(item.id)"><img src="http://images0.zaijiawan.com/wechat/material/copy_16px_27826_easyicon.net.png@!ori"></span>
</td>
<td><p>{{item.name}}</p></td>
<td>
<div class="weChatImage">
<img :src="item.img" style="width: 70px;height: auto"/>
</div>
</td>
<td>
<div class="weChatImage">
<img :src="item.squareImg" style="width: 70px;height: auto"/>
</div>
</td>
<td><p v-if="item.enablePush === 1">推文</p><p v-if="item.enablePage === 1">落地页</p>
<p v-if="item.enableRectangleImg === 1">长图功能页</p></td>
<td>
<div><a :href="item.url" target="_blank">查看</a></div>
</td>
<td>
<div v-for="goods in goodsList[index]" class="Ellipsis"><p>{{goods.goodsTitle}}</p></div>
</td>
<td><a name="edit" @click="goToEdit(item.id)">编辑</a></td>
</tr>
</tbody>
我个人认为在进行前后台数据交互的时候,需要特别注意一下数据的格式。