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

在项目开发中遇到一个问题,页面中执行的操作需要通过两个接口返回的数据进行操作,但是两个接口因为数据量大小,返回的时间不一定,经常会出现一个完毕,但是另一个还在执行。
因为是放在两个方法里,所以也没法做到通信,然后通过查axios文档发现了解决办法
可以这么写

axios.all([axios.post("/test1"),axios.post("/test2")]).then((test1,test2)=>{
    console.log('两个接口都执行完毕啦')
})

这么写就完美的额解决了,但是我想把两个接口放在两个方法里,因为我想在别的地方单独调这两个接口,因为axios是封装好的,没法修改,所以需要修改已经写好的方法就可以了

/*
  在methods中这么写
*/
get_table(){
    return new Proimse((resolve,reject)=>{
        this.$axios.post("/test1").then((res)=>{
            resolve()
        })
    })
}
get_select(){
    return new Proimse((resolve,reject)=>{
        this.$axios.post("/test2").then((res)=>{
            resolve()
        })
    })
}

/*
    然后在created中这么写即可
*/

Promise.all([this.get_table(), this.get_select()]).then(()=>{
    console.log('我是created中的事件,现在两个接口都执行完毕啦')
})

你可能感兴趣的:(在Vue项目中,等待所有请求完毕以后执行操作)