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

快来打我* 2022-12-18 11:54 141阅读 0赞

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>

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