解决微信小程序中app.js异步获取数据，首页无法获取到数据的问题

在小程序实际开发的中，有一些数据有可能在多个页面都会用到，我们会作为globalData在app.js中请求。但是网络请求是异步的，进入小程序首个页面页面的onload中的逻辑很可能在请求返回前就已经执行了，如何保证在页面使用的时候一定能获取到数据呢？

1、主动请求全局数据，使用回调函数获取到全局数据

//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
			  })
		  }
	  }
	  
	},
})

第一种方法比较简单，很容易理解，但是写起来内容较多

2、需要使用时再请求，借助Promise和async函数， 阮一峰 es6

//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)
	},
	
	
	
})