小程序开发中有时候会遇到下面这样的情况:
小程序打开时,我们需要触发登陆,获取用户的基本信息,然后在首页中立即使用,但是会发现在app.js的onLaunch中请求发出去了,首页在onLoad中却没有拿到数据?
还有一个场景,比如,你希望用户在打开小程序的时候,就会自动定位,无论用户进入小程序先看到的是哪个页面,那么,定位函数势必需要在onLaunch中触发,但是呢,定位异步请求需要时间,你首页需要使用定位去获取数据,首页在onLoad中去使用定位时,是根本没办法拿到定位信息的。
这是因为异步请求,还没拿到结果,onLoad就执行了。
小程序官方给的方法是:使用回调,还挺好用的~
app.js中
// 登录
App({
onLaunch: function () {
this.wxLogin(res => {
if (res.data.code == 200) {
this.globalData.loginInfo = res.data.data;
} else{
// 载入登录缓存信息
this.globalData.loginInfo = wx.getStorageSync('loginInfo') || {token: ''};
}
// 回调,请求得到响应,反馈给loginInfo这个函数
if (this.loginInfoCallback) {
this.loginInfoCallback(this.globalData.loginInfo)
}
}, fail => {
// 登陆失败的时候 载入登录缓存信息
this.globalData.loginInfo = wx.getStorageSync('loginInfo') || {token: ''};
if (this.loginInfoCallback) {
this.loginInfoCallback(this.globalData.loginInfo)
}
})
},
wxLogin: function (success, fail, complete){
// ......一堆代码.....
}
})
index.js
var app = getApp();
Page({
// 多余的代码省略了,只摘录了关键部分
onLoad: function () {
// 检查登录信息是否在全局变量中吗?在的话说明登陆请求在此刻已经执行完成了,就不用去调回调了,我们可以直接使用
if (app.globalData.loginInfo.token && app.globalData.loginInfo.token != '') {
this.setData({
userBindPhone: loginInfo.mobile ? true : false,
})
} else {
// 如果全局中没有,那么我们就得等一下下,等带它完成后我们再去使用
// 在这里调用app.loginInfoCallback函数,就可以等待该函数回调响应去做页面逻辑处理
app.loginInfoCallback = (loginInfo) => {
this.setData({
userBindPhone: loginInfo.mobile ? true : false,
})
}
}
}
})
回调函数的名字' loginInfoCallback ' 可以自己定义