微信/头条小程序如何确保异步请求执行完后再执行各页面的onLoad方法
在开发的过程中,由于小程序生命周期的执行顺序是不可暂停的,以登录权限为例:
当进入小程序时首先执行app.js的onLaunch--onShow方式后再执行b页面的onLoad方法,b页面需要弹出提示登录的弹窗,当服务器返回需要一定时间或网络较差时,此时小程序已经执行了b页面的方法,导致在登录接口还没有返回前就已经在b页面判断了权限。
app.js
onLaunch() {
loginByCode().then(resolve => {
//do something
});
}
loginByCode() {
return new Promise(resolve => {
wx.request({
url: \'https://xxx.com\',
method: \'GET\',
data: {},
success: ({
data,
statusCode,
header
}) => {
//接口返回结果后将登录状态置为true
app.globalData.loginPermissions = true;
resolve();
}
})
});
}
这里我们在小程序冷启动时onLaunch中做了个简单的异步请求。
页面b.js
onLoad() {
//当进入此页面时,需要判断是否已登录用户,如果没有登录需要弹出登录弹窗
if(!app.globalData.loginPermissions) {
this.loginPopup.open();
}else {
//do something
}
}
假如按照以上方式处理,会导致loginByCode登录接口返回缓慢时,进入b页面后,即使用户已经是登录的状态,但依然会弹出登录窗口。
对于上述问题,我们来改进一下代码
app.js
onLaunch() {
loginByCode().then(resolve => {
if (this.loginCallBack) {
//这里的this 是指当前页面的this
this.loginCallBack();
}
});
}
loginByCode() {
return new Promise(resolve => {
wx.request({
url: \'https://xxx.com\',
method: \'GET\',
data: {},
success: ({
data,
statusCode,
header
}) => {
//接口返回结果后将登录状态置为true
app.globalData.loginPermissions = true;
resolve();
}
})
});
}
页面b.js
onLoad() {
//当进入此页面时,需要判断是否已登录用户,如果没有登录需要弹出登录弹窗
if(app.globalData.loginPermissions && app.globalData.loginPermissions != \'\') {
//do something
}else {
app.loginCallBack = () => {
if (!app.globalData.loginPermissions) this.loginPopup.open();
else this.loginPopup.close();
}
}
}
请发表评论