最近在项目中有个功能涉及到了循环从后台获取数据，具体业务逻辑如下！
1.首先通过后台获取一组数据；
2.在每组数据里拿一个参数id用来请求另外一个接口；
3.请求数据后对应的压入到首次请求回来的数组中在页面上进行渲染；
解决方法：循环请求数据的时候需要将异步修改为同步，否则数据对应不上。
//请求第一组数据
axios.post('http://xxxx.com', qs.stringify(Data)
.then((resolve)=>{
//请求成功后拿到数据
//例如请求回来的数据如下；
var data = [
{
id:'1',list:[]},
{
id:'2',list:[]}
{
id:'3',list:[]}
]
this.info = data;//改变页面数据 info是页面上循环渲染的数组
//循环获取ID
var arry = [];
for(var i = 0 ;i<data.length;i++){
arry.push(data[i].id)
}
return arry;
})
.then((resolve)=>{
let arr = resolve.map(
(value) => {
return new Promise((resolve, reject) => {
var _self = this;
var Data = {
CertID: value
};
axios.post('http://www.baidu.com',qs.stringify(Data))
.then(function(resolve){
console.log(resolve)//获得请求回来的数据
})
});
}
);
let promises = Promise.all(arr)
.then((resolve) => {
//循环将改变info内的list数组
for(var i =0 ;i<resolve.length;i++){
this.info[i].list=resolve[i]
}
//重新渲染页面
this.$set(this.info)
})
})
以上是采用Promise.all()进行循环处理的；还有另外一种处理方式利用ajax将async属性修改为false也可以实现同步。