For循环里面 实现 aixos排队请求数据

今天下午 碰见了一个问题 也是让我想了 一段时间  

直接上代码 废话不多说   我用伪代码 模拟当时的场景  本人是用vue开发的

//arr 是一个数组  我要从arr数组里面获取  参数 id  然后发送ajax请求 

等于说是 获取一个 发送一次请求 获取一个发送一次请求  然后把获取的数据 push到 vue 的data 对象里面

arr:'  '   //这个再vue得 data字面

 for(var i=0;i<arr.length;i++){

   var  id=arr[i];

  // 发送ajax代码   我是用的axios   

   axios.get(url,{id}).then(  res=>{  arr.push[res.data]   } )

}

可能你的想法 是  回来一个push一个 但是最后在页面上你会发现 顺序 混乱了 

可能你想得是 我获取一个 存入数组一个 但是 每一次请求数据回来的时间  可能不一样 导致 后面发送得可能 先回来的 

这样 你在前台 遍历数据得时候 就明显不是 ui给你要求设计得 页面顺序了  这个时候 就让人很头疼了 

我也曾想过 用 async  await       promise.All   但最后被我 排除了   至于什么原因 有想法得童鞋可以去试试看

最后 我是用得解决方法 是 在每一个发送请求的时候  加一个一次性定时器  设置 0毫秒

 for(var i=0;i<arr.length;i++){

   var  id=arr[i];

  // 发送ajax代码   我是用的axios   

 setTimeout( axios.get(url,{id}).then(  res=>{  arr.push[res.data]   } )，0)  //设置一次性定时器 

 }

发现 乱序的顺序解决了 但是 变成了全都是倒序输出了   这个时候你加一个判断就行了 

 for(var i=0;i<arr.length;i++){

   var  id=arr[i];

  // 发送ajax代码   我是用的axios   

 setTimeout( axios.get(url,{id}).then(  res=>{  arr.push[res.data]  if(arr.length>=2){ arr.reverse() }  } )，0)  //设置一次性定时器 

 }

最后终于解决了  大家可以去试试看   

后面 我以为解决 发现 只是大多数情况下  是正常的 偶尔还是会出现 顺序不对的情况    我大概刷新页面了20多次出现一次乱序 

后面 我换了中思路 选择了 es6中的 promise.all 的方法   

使用方法 是 先定义一个空的promiseAll=[] 数组  

然后通过for循环 把 所有异步 执行的 代码 push 一个一个push进去 

最后使用promise.all 方法统一 去处理 最后发现能解决了   其实把 终究还是一种解决思路的问题

想了想最后还是 附上我解决问题的代码

var promiseAll=[];//存储发送请求的数组

                // console.log(column_id)

                var result=Array.from(res.data.children);

                for(var i=0;i<result.length;i++){

                    //获取文章id

                    var article_id=result[i].article_id;

                    promiseAll.push(new Promise((resolve)=>{

                        pub._InitAxios({

                            _url:pub._url,  //公共接口

                            ur:pub._DetailApi.article,

                            data:{column_id,article_id},

                            cbk:(res)=>{

                                resolve(res.data);  //把res.data  后台响应的数据  传入resolve函数里面作为参数 

                            }

                        });

                    }))

                }

      //promiseAll数组里面有promise对象 全部执行完成 才可以往下走 打印出来

                Promise.all(promiseAll).then((res)=>{

                           console.log(res)        //res  这里接收 上面的数据  [[]

                })