for循环中嵌套异步请求问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lp15203883326/article/details/83068339

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次循环

//用递归代替for循环，可以保证正常执行顺序
function recurTest(j, length){
		setTimeout(function(){
			console.log("第"+(j+1)+"次循环");
			if(++j < length){
				recurTest(j, length);
			}
		}, Math.random() * 3000);
}
recurTest(0, 5);
//第1次循环
//第2次循环
//第3次循环
//第4次循环
//第5次循环

我是在打开某个页面时就发出一个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>

我个人认为在进行前后台数据交互的时候，需要特别注意一下数据的格式。