在Vue项目中，等待所有请求完成以后执行操作

异步加载接口数据并渲染Echarts图表,

最新推荐文章于 2024-09-05 18:18:15 发布

原创最新推荐文章于 2024-09-05 18:18:15 发布 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts #javascript

文章描述了一个使用axios.all并发请求两个接口，然后在所有请求成功后调用getEchartData函数进行Echarts图表数据渲染的过程。接口1和接口2分别获取data1和data2，这两个数据用于图表展示。

使用场景，首页渲染echarts数据，需等所有接口返回后再进行渲染。

axios.all([
this.interface1(mechanismId), // 请求①
this.interface2(mechanismId) // 请求②
]).then(() => {
    this.getEchartData()  // 执行数据渲染
})

这里我的请求是封装成方法的了（注意，方法中需将请求作为返回值）

interface1(mechanismId) {
  let today = Date.parse(new Date())
  return interface1IFS(mechanismId, today).then(result => {
    if (result.data.code === 200) {
      this.data1= result.data.data  // 拿到接口1的数据
}
  }).catch()
},

interface2(mechanismId) {
  let today = Date.parse(new Date())
  return interface2IFS(mechanismId,today).then(result => {
    if (result.data.code === 200) {
      this.data2= result.data.data  // 拿到接口2的数据
    }
  }).catch()
},

getEchartData () {
  Console.log(‘拿到了数据啦，可以渲染啦~’)
}

export function interface1IFS(mechanismId, startTime) {
  return axios({method: 'get', url: '/interface/interface1?mechanismId=' + mechanismId + '&startTime=' + startTime, allowCredentials: true})
}

export function interface2IFS(mechanismId, endTime) {
  let data = new FormData()
  data.append(mechanismId, mechanismId)
  data.append(endTime, endTime)
  return axios({method: 'post', url: '/interface/interface2d', data: data, allowCredentials: true})
}