使用场景,首页渲染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})
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐