最近在项目中有个功能涉及到了循环从后台获取数据,具体业务逻辑如下!

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也可以实现同步。

Logo

前往低代码交流专区

更多推荐