vue循环从后台获取数据
最近在项目中有个功能涉及到了循环从后台获取数据,具体业务逻辑如下!1.首先通过后台获取一组数据;2.在每组数据里拿一个参数id用来请求另外一个接口;3.请求数据后对应的压入到首次请求回来的数组中在页面上进行渲染;解决方法:循环请求数据的时候需要将异步修改为同步,否则数据对应不上。//请求第一组数据axios.post('http://xxxx.com', qs.stringify(Data).th
·
最近在项目中有个功能涉及到了循环从后台获取数据,具体业务逻辑如下!
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也可以实现同步。
更多推荐
已为社区贡献3条内容
所有评论(0)