app.onLaunch与page.onLoad异步问题终极解决方案

场景：

在小程序中大家应该都有这样的场景，在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
    }
})

具体文档和Demo见↓

Github：https://github.com/1977474741/spa-custom-hooks

祝大家用的愉快，记得star哦