前端实践题目

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

2021-12-08  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读