首页 前端知识 在Vue项目中,等待所有请求完成以后执行操作

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

2024-08-08 22:08:13 前端知识 前端哥 414 109 我要收藏

使用场景,首页渲染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})
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15025.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!