vue如何等待axios异步请求完毕之后执行函数

Question

一个按钮触发点击事件，该点击事件触发一个axios请求

<button @click="addData">
    点击
</button>

methods:{
    addData(){
        this.sendData('http://www.xxx.com')
        console.log('ok')
    },
    sendData(url){
        this.axios.post(url).then(...)
    }
}

我想等axios请求完毕后再执行addData中console.log()这个语句，
因为sendData这个函数已经封装好了逻辑，所以不能在.then中修改，请问有什么方法

Answer 1

methods:{
    addData(){
        this.sendData('http://www.xxx.com').then(function(){
            console.log('ok')
        })
    },
    sendData(url){
       // ↓这里的then 处理完成后会返回一个 Promise，其中如果没有异常，
       // 其 then return 的值会作为下一次 then 的参数。
       return this.axios.post(url).then(...)
    }
}

Answer 2

methods:{
    async addData(){ //使用async/await 函数
        await this.sendData('http://www.xxx.com') //等待执行完成
        console.log('ok')
    },
    sendData(url){
        return this.axios.post(url).then(...) //这里return还是一个promise
    }
}