美文网首页前端开发那些事儿
在Vue项目中,等待所有请求完毕以后执行操作

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

作者: _duck不必 | 来源:发表于2020-07-14 16:13 被阅读0次

    在项目开发中遇到一个问题,页面中执行的操作需要通过两个接口返回的数据进行操作,但是两个接口因为数据量大小,返回的时间不一定,经常会出现一个完毕,但是另一个还在执行。
    因为是放在两个方法里,所以也没法做到通信,然后通过查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项目中,等待所有请求完毕以后执行操作

        本文链接:https://www.haomeiwen.com/subject/mwkfhktx.html