vue3实际开发中遇到的问题:setup遇到异步请求逻辑时结合async使用方法

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可操作实例的问题,且容易造成回调地狱

猜你喜欢

转载自blog.csdn.net/Beatingworldline/article/details/119137329
今日推荐