定时器妙用-把顺序加载大量ajax调用
在项目中根据第一个接口获得的uid去循环请求不同参数传入的第二个url
然后把结果插入第一个接口的数据内,这样做的话有时候会不按顺序加载,这时候只要设置定时器(为0也可)即可
fngetdate(){//点击确定获取请求 let url = this.baseurl+ 'jk_PLM/get_bom_list.php' this.$http.get(url).then((res)=>{ console.log(res) if(!res) return this.data =[] res.data.map((v,i)=>{ this.data.push({ number:i+1, key: i*v[0], producType:'二级管类', id:v[2]+v[0], yongliang:v[1], tags: [], }) }) this.fngetDetail() console.log(this.data) }) },
fngetDetail(){ var url = null this.data.map((v,i)=>{ console.log(v.tags) url =this.baseurl+ 'jk_PLM/get_drow_and_doc.php?pid='+v.key // console.log(url) setTimeout(()=>{//设置定时器会顺序加载 this.$http.get(url).then((res)=>{ console.log(res.data) this.data[i].tags = res.data // res.data.map((value,ind)=>{ // // value.filename,value.file_url // v.tags.push({ // filename:value.filename, // file_url:value.file_url // }) // }) }) },0) }) }
<a-row :gutter="20" type="flex" justify="start"> <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="margin-bottom:20px;"> <a-card title="" hoverable :headStyle="cardHeaderStyle" style="width:100%;text-align:center;"> <a-table :columns="columns" :data-source="data" bordered size="middle" :pagination="pagination"> <!-- 插槽 --> <span slot="tags" slot-scope="tags"> <a-spin v-if="tags.length <= 0"/> <p v-for="tag in tags"> <a :href="tag.file_url" title="点击下载图标料号">{{tag.filename}}</a> </p> </span> <!-- 内部表 --> <!-- <div slot="expandedRowRender" slot-scope="record" style="margin: 0"> 1231 {{record}} </div> --> </a-table> </a-card> </a-col> </a-row>