vue3实际开发中遇到的问题:setup遇到异步请求逻辑时结合async使用方法
setup执行在VUE实例的beforeCreate()与created()之前函数抛出的逻辑内容包括数据和方法都已完成setup引入的JS逻辑:exportdefault function TestSetup() {const getData = (param) => {//省略异步请求代码return data;};r
·
setup执行在 VUE实例的beforeCreate()与created()之前 函数抛出的逻辑内容包括数据和方法都已完成
- setup引入的JS逻辑:
export default function useProductSetup() {
const getData = (param) => {
//省略异步请求代码
return data;
};
return {
getData
}
}
- VUE文件
setup(props, context) {
const {
getData
} = useProductSetup();
return {
getData
};
},
beforeCreate(){
this.getdata( ); //此时方法已存在
},
此时 因为函数getdata存在异步请求(开发中绝大部分接口访问都是异步)
mounted() {
let res = this.getData({
Param
});
res;//此时无法获得该异步请求数据,res为空
},
若将JS返回的函数封装为promise对象 在vue实例中利用await即可获得该数据进行操作(async精髓 同步方式写异步)
export default function TestSetup() {
const getData = (param) => {
return new Promise((resolve,reject) => {
//省略异步请求代码
resolve(data);
})
};
return {
getData
}
}
async mounted() {
let res = await this.getData();
res;//此时即可获得该异步请求数据
},
这里也可以写成回调函数的方式
export default function TestSetup() {
const getData = (param,success) => {
//省略异步请求代码
success:success
};
return {
getData
}
}
async mounted() {
await this.getData(param,{
this.$toast.success("成功");//等后续处理代码
//但前提是这里的异步执行在ue实例化之后可以获取vue实例
}
);
},
但这里依然无法解决没有VUE可操作实例的问题,且容易造成回调地狱
更多推荐
已为社区贡献3条内容
所有评论(0)