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  
    },  
    onReadyShowUser(){  
        //小程序内页面渲染完成 && 页面显示 && 拿到用户信息  
        //Tips：适用于需要获取小程序组件或者dom，并且每次页面显示都会执行的场景，例如，每次显示页面的时候都要拿到最新的头像去渲染到canvas上面  
    },  
})

具体文档和Demo见↓

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

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