场景：
大家项目中应该都存在这样的场景，在onLaunch里用wx.login拿到code，再用code去发送请求获取token、用户信息等，整个过程都是异步的，然后我们在页面里onLoad去用的时候异步请求还没回来，导致没拿到想要的数据，以往要么监听是否拿到，要么自己封装一套回调，总之都挺麻烦，每个页面都要写一堆无关当前页面的逻辑。
直接上终极解决方案，公司内部已接入一年很稳定：
1.可完美解决异步问题
2.使用方便
3.可灵活定制异步钩子
4.采用监听模式实现，接入无需修改以前代码
5.支持各种小程序和vue架构
。。。
//globalData提出来声明
let globalData = {
// 是否已拿到token
token: '',
// 用户信息
userInfo: {
userId: '',
head: ''
}
}
//注册自定义钩子
import CustomHook from 'spa-custom-hooks';
CustomHook.install({
'Login':{
name:'Login',
watchKey: 'token',
onUpdate(token){
//有token则触发此钩子
return !!token;
}
},
'User':{
name:'User',
watchKey: 'userInfo',
onUpdate(user){
//获取到userinfo里的userId则触发此钩子
return !!user.userId;
}
}
}, globalData)
// 正常走初始化逻辑
App({
globalData,
onLaunch() {
//发起异步登录拿token
login((token)=>{
this.globalData.token = token
//使用token拿用户信息
getUser((user)=>{
this.globalData.user = user
})
})
}
}）
//关键点来了
//Page.js，业务页面使用
Page({
onLoadLogin() {
//拿到token啦，可以使用token发起请求了
const token = getApp().globalData.token
},
onLoadUser() {
//拿到用户信息啦
const userInfo = getApp().globalData.userInfo
},
onReadyShowUser(){
//小程序内页面渲染完成 && 页面显示 && 拿到用户信息
//Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景，例如，每次显示页面的时候都要拿到最新的头像去渲染到canvas上面
},
})
具体文档和Demo见↓
Github：https://github.com/1977474741/spa-custom-hooks
祝大家用的愉快，记得star哦
