温馨提示: 着急寻求解决方案的童鞋可直接看第2章
1. 前言
现有个需求，父组件的一个方法 funA()，在父组件调用也在子组件调用，且 funA() 中有接口请求，要知道接口请求是异步执行的，我想拿到请求的返回值来判断接下来进行哪一步骤。
首先我就想到了 await + promise 组合
// 该方法在父组件
funA(){
return new Promise((resolve)=>{
api(this.params).then((res)=>{
resolve(res.data)
})
})
}
// 在父组件中调用
async funB(){
let bol = await this.funA()
if(bol){...}
}
但是当子组件也需要调用这个方法时，傻眼了...
// 该方法在子组件
async funC(){
let bol = await this.$emit('funA', data)
console.log(bol) // 是函数体，并不是promise的返回值
}
emit 没有返回值，用不了promise ！！
2. 解决方案
所以又换条路子，想把异步请求同步操作，除了 await 还有 回调函数 也可以实现。
// 该方法在父组件
funA(callback){
api(this.params).then((res)=>{
if (res.data){
(callback && typeof(callback) === 'function') && callback();
}
})
}
// 在父组件中调用
async funB(){
this.funA(()=>{
...
})
}
// 该方法在子组件
async funC(){
this.$emit('funA', ()=>{
...
})
}
最后感谢文章 https://www.h5w3.com/36959.html
如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
