美文网首页前端实践题目
uniapp 应用启动onLaunch方法,改为同步,执行后再执

uniapp 应用启动onLaunch方法,改为同步,执行后再执

作者: 泪滴在琴上 | 来源:发表于2021-12-08 15:21 被阅读0次

    问题描述

    在app.vue里面onLaunch中获取openid和token,获取成功之后,进入页面调数据接口报错,因为token没有带过去,为了让页面在onLaunch执行完之后再去页面调接口

    解决方案

    way1

    在main.js里面添加

    Vue.prototype.$onLaunched = new Promise(resolve => {
        Vue.prototype.$isResolve = resolve
    })
    

    然后再app.vue的onLaunch里面加this.$isResolve()

    onLaunch () {
        // #ifndef H5
        uni.login({
            success: loginRes => {
                // #ifdef MP-WEIXIN
                login({ // 该接口为我们自己写的获取 openid/token 的接口,请替换成自己的
                    appId: 'wx1234567890',
                    code: loginRes.code
                }).then(res => {
                    try {
                        console.info(res.object.token)
                        uni.setStorageSync('mcToken', res.object.token)
                        this.$isResolve()
                    } catch (e) {
                        console.error(e)
                    }
                })
                // #endif
            }
        })
        // #endif
    }
    

    再自己的业务页面onLoad中增加await this.$onLaunched

    async onLoad(option) {
        //等待登录成功    
        await this.$onLaunched;
        
        // 后续业务逻辑
    },
    

    需要注意的是onload前面要加async,否则编译不过去

    way2

    首先再main.js里面增加

        //页面入参option
        
        //自己的业务逻辑   
        
        //如果是ajax,注意要加同步等待
        await Vue.prototype.http.post('/customer/updateLastVisitStoreId',{lastVisitStoreId:storeId}).then(res => {      
            console.log(res);
            
        }).catch(err => {
            console.log(err);
        })
     
    }
    
    

    然后再业务页面onload增加

    async onLoad(option) {          
        await this.$visitStore(option);//同步执行这个方法
     
    }
    
    微信图片_20211208152033.png

    相关文章

      网友评论

        本文标题:uniapp 应用启动onLaunch方法,改为同步,执行后再执

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