评论

小程序app.onLaunch与page.onLoad异步问题的最佳实践

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

场景:

在小程序中大家应该都有这样的场景,在onLaunch里用wx.login拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。

直接上终极解决方案,公司内部已接入一年很稳定:

1.可完美解决异步问题

2.不污染原生生命周期,与onLoad等钩子共存

3.使用方便

4.可灵活定制异步钩子

5.采用监听模式实现,接入无需修改以前代码

6.支持各种小程序和vue架构

。。。

//app.js
//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哦

最后一次编辑于  04-08  
点赞 12
收藏
评论

9 个评论

  • U.K
    U.K
    04-04

    看起来不错的样子,先收藏了

    04-04
    赞同 1
    回复
  • LIYI
    LIYI
    03-29

    手动点赞

    03-29
    赞同 1
    回复 1
    • Api调用师
      Api调用师
      03-30
      感谢支持
      03-30
      回复
  • 鱼干二两半
    鱼干二两半
    01-18

    我在第一步引入的时候就已经报错了,module is not defined,我有些想不通

    01-18
    赞同 1
    回复 6
    • Api调用师
      Api调用师
      01-18
      原生小程序是吧?有构建npm吗
      01-18
      回复
    • 鱼干二两半
      鱼干二两半
      01-18
      解决了,是我没有构建npm
      01-18
      回复
    • 鱼干二两半
      鱼干二两半
      01-19回复Api调用师
      感谢楼主的奉献,是真的好用,尤其是对我这种小白
      01-19
      回复
    • Api调用师
      Api调用师
      发表于小程序端
      01-20回复鱼干二两半

      哈哈,那就帮忙多宣传,让大家都知道有这么个东西,多谢了您内!

      01-20
      回复
    • 富途熊熊
      富途熊熊
      01-20
      引入时候没有报错,但最后也报了module not defined, npm搭建感觉也是对的,不太清楚为什么?
      01-20
      回复
    查看更多(1)
  • xplee
    xplee
    01-11

    赞一个

    01-11
    赞同 1
    回复 1
    • Api调用师
      Api调用师
      01-11
      感谢支持
      01-11
      回复
  • 王浩Hanks🇨🇳
    王浩Hanks🇨🇳
    01-10

    点赞收藏加评论

    01-10
    赞同 1
    回复 1
    • Api调用师
      Api调用师
      01-11
      感谢支持
      01-11
      回复
  • 订阅happiness
    订阅happiness
    01-10

    我们目前用的广播。。

    01-10
    赞同 1
    回复 11
    • Api调用师
      Api调用师
      01-10
      哈哈,你用这个试试,用完绝对真香,注册的钩子可以随意组合,这东西解决的不只是某个异步回调的问题,甚至还能这么用onReadyShowUser,意思就是渲染完成+每次显示页面+拿到用户信息
      01-10
      回复
    • Api调用师
      Api调用师
      01-10
      钩子配置好之后就一劳永逸了,跟使用普通生命周期一样简单方便
      01-10
      回复
    • 订阅happiness
      订阅happiness
      01-10回复Api调用师
      我们目前只需要,app.js监听定位改变后能通知各个页面进行同步更新列表数据。用broadcast能解决80%的问题。
      01-10
      回复
    • Api调用师
      Api调用师
      01-10回复订阅happiness
      我们之前也是有这个需求,要监听用户授权到位置后通知页面更新数据,不过还要其他的类似需求,比如登录态、用户信息,全局配置,全都是异步的,所以写了这玩意,有兴趣可以试试,比broadcast好用
      01-10
      回复
    • 订阅happiness
      订阅happiness
      01-10回复Api调用师
      登录台用户信息这些我们用的MobX
      01-10
      回复
    查看更多(6)
  • 🇹 🇴 🇲 🇲 🇾
    🇹 🇴 🇲 🇲 🇾
    05-17

    vue3 setup中支持不

    05-17
    赞同
    回复 1
    • Api调用师
      Api调用师
      星期三 16:49
      vue3没刻意做兼容,你可以试试
      星期三 16:49
      回复
  • LIYI
    LIYI
    03-29
    • 通过劫持原生的Page、App实现,代码比较高级,不是很容易读懂
    • 还支持Vue等框架,这不便于小程序优化瘦身


    JS是作为主线程单线程语言,使用单例模块是不是更简单。在一个独立的LoginManager模块中负责登录与用户信息的拉取,业务代码想用这些信息,直接用异步/同步统一的方式来取,如果信息还没有回来等一下;如果已经有了直接返回,这样是不是逻辑更清晰一些?


    03-29
    赞同
    回复 3
    • Api调用师
      Api调用师
      03-30
      1、因为第一版是vue的版本,后面对小程序写了vue的polyfill。
      2、还行,影响不大,压缩后也就11k。
      这个东西支持组合钩子,所以每个页面的所有钩子都要维护自己的状态,不能用单例。
      这个库的最大优势就是继承了生命周期钩子的使用方式,并且可以自由组合,这两个特点可以把全局数据和页面逻辑完全解耦而且使用也灵活。
      用调用api的方式来使用,还是增加了业务层使用成本,没有钩子使用简单,注册好后在钩子里该怎么拿数据怎么拿数据,不携带具体数据,所以不用写也不用耦合业务相关逻辑(比如在拿信息和存信息的时候调用个什么api)
      03-30
      回复
    • LIYI
      LIYI
      03-31回复Api调用师
      “这个库的最大优势就是继承了生命周期钩子的使用方式,并且可以自由组合”,认同
      “用调用api的方式来使用,还是增加了业务层使用成本(比如在拿信息和存信息的时候调用个什么api)”,认同
      两种方案各有优劣,这时候看受众。
      03-31
      回复
    • Api调用师
      Api调用师
      03-31回复LIYI
      可以试试,真的很香
      03-31
      回复
  • 。
    03-04

    可以在组件中使用吗

    03-04
    赞同
    回复 6
    • Api调用师
      Api调用师
      03-07
      可以
      03-07
      回复
    • 焦糖瓜子
      焦糖瓜子
      03-29
      组件里具体怎么使用呢,微信小程序的
      03-29
      回复
    • Api调用师
      Api调用师
      03-30回复焦糖瓜子
      vue架构支持,刚看了下原生小程序的情况,现在还不支持原生小程序的组件。
      03-30
      回复
    • miloooooooooooUp
      miloooooooooooUp
      04-02回复Api调用师
      uniapp打包出的字节和支付宝组件中也无法使用  微信的可以 有办法处理吗
      04-02
      回复
    • Api调用师
      Api调用师
      04-02回复miloooooooooooUp
      害,先在页面里通知组件吧,每个平台的组件实现不一样,还要做兼容
      04-02
      回复
    查看更多(1)
登录 后发表内容