在小程序实际开发的中,有一些数据有可能在多个页面都会用到,我们会作为globalData在app.js中请求。但是网络请求是异步的,进入小程序首个页面页面的onload中的逻辑很可能在请求返回前就已经执行了,如何保证在页面使用的时候一定能获取到数据呢?
//app.js
App({
globalData:{},
onlaunch(){
//调用获取数据的方法
this.getUserInfo()
},
//获取全局数据
getUserInfo(){
wx.request({
url:'https://www.test.com',
data:{},
success:res=>{
//设置为全局数据
this.globalData.userInfo=res.data
//检测是否有回调函数,如果有,则执行
if(app.userInfoCallback&&typeof app.userInfoCallback=='function'){
app.userInfoCallback()
}
}
})
},
})
//index.js
const app=getApp()
Page({
data:{},
onLoad(){
//此时需要判断全局数据是否获取到
//如果已经获取到,则直接使用
if(app.globalData.userInfo){
//如果此处的逻辑较多可以提炼为一个函数
this.setData({
userInfo:app.globalData.userInfo
})
}else{
//如果还未请求到数据,则创建一个回调函数,等待数据获取完成后调用
app.userInfoCallback = res => {
this.setData({
userInfo:app.globalData.userInfo
})
}
}
},
})
第一种方法比较简单,很容易理解,但是写起来内容较多
//app.js
App({
globalData:{},
onlaunch(){
},
//获取全局数据
getUserInfo(){
return new Promise((resolve, reject) => {
let userInfo=this.globalData.userInfo
if(userInfo){
resolve(userInfo)
}else{
wx.request({
url:'https://www.test.com',
data:{},
success:res=>{
//设置为全局数据
this.globalData.userInfo=res.data;
resolve(res.data)
},
fail:err=>{
//注 这里没有做请求接口失败的错误处理,而是resolve了一个空对象,因为获取数据失败的情况下,错误处理也没啥意义
resolve({})
}
})
}
})
},
async setUserInfo(){
this.setData({
userInfo: await app.getUserInfo()
})
}
})
//index.js
const app=getApp()
Page({
data:{},
onLoad(){
//直接调用函数
app.getUserInfo().then(userInfo =>{
this.setData({
userInfo:userInfo
})
})
//也可以借助async函数, 因为setUserInfo中使用了setData,所以需要借助call来调用
app.setUserInfo().call(this)
},
})