cssjshtml vue中共享变量的使用

  • 2019 年 11 月 26 日
  • 筆記

一个接口提供查询功能,但一次只能接收传参一个值。

我的需求需要这个接口请求上百次才能返回需要的所有数据。

提供接口无法改变,剩下的只能自己做。

这个功能是用于生成周报对延迟不敏感,一周也就来请求一轮。

问题点是将通过axios 异步获取的 所有请求,将数据统一收集处理。

  1. 首先在src/utils/ 下创建 global.js 这个里面用来存共享变量。
const price=[]  export default{  price  }
  1. 在main.js中 声明共享变量。
import global_val from '@/utils/global'  Vue.prototype.global=global_val 
  1. 将axios请求的返回值push到price列表中.
this.global.price.push({'appname':appname,'price':limit_max*88})  axios.post('/go_gaia', {           .....           }       ).then(res => {             .....           limit_max=Math.max.apply(null,limit)              .....          this.global.price.push({'appname':appname,'price':limit_max*88})          })
  1. 等所有请求都返回后,从共享变量中取出数据,生成图表.
mounted()  {  for (let i = 0; i < this.deplist.length; i++) {      this.$refs.cpu[i].refresh_data(this.deplist[i].spacename, this.deplist[i].appname, 168)  }  let interval=setInterval(()= > {  if (this.global.price.length == = 195){  console.log(this.global.price)  this.tableData=this.global.price  clearInterval(interval);    }  }, 1000);  this.global.price=[]  }