跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • wx 小程序的全局异步数据你们是如何加载管理的?
未分類
20 1 月 2021

wx 小程序的全局异步数据你们是如何加载管理的?

wx 小程序的全局异步数据你们是如何加载管理的?

資深大佬 : firhome 7

向各位开发过小程序的大佬们请教个问题。

我有一个小程序,需要初始化一些远程数据 放全局 ( 小程序的各个页面可能都会使用到 )

所以在 app onLaunch 的时候去请求~ 但是小程序页面并不会等 这个异步请求结束后再加载。所以会导致页面报错。

那么官方给的解决方案是 app 里写 callback 。 我有很多页面都会用到这部分数据 可又不可能 每个页面去写 callback 。

我自己想了两个解决方案。

1. 小程序 onLaunch 的时候去本地存储找是否有这部分数据,如果有 不请求(直接使用,页面不会报错),如果没有那请求之后 再重新调用 pages 的 onload 加载一次(类似网页刷新) 页面。

2.做一个空白( loading )页面当首页,等数据都加载好了 再跳 其它页面。

想问问大家是怎么解决呢?

大佬有話說 (34)

  • 資深大佬 : undertonememorie

    在代码不做大改动情况下推荐第二种

  • 資深大佬 : sjhhjx0122

    如果没有那请求之后 再重新调用 pages 的 onload 加载一次(类似网页刷新) 页面。
    为什么不直接调用那个请求?

  • 主 資深大佬 : firhome

    @sjhhjx0122 我描述错误,没加载的话 是要再请求一下接口 然后再重新 onload

  • 資深大佬 : totoro52

    onLaunch 不建议做网络请求

  • 主 資深大佬 : firhome

    @totoro52 为什么呢,那这种该写到哪里呢

  • 資深大佬 : hereIsChen

    我们用的第二种方法,给了个加载页

  • 資深大佬 : hereIsChen

    类似 app 的启动页面

  • 資深大佬 : hiro0729

    写个通用的方法,里面先判断是否 globalData 里有没有数据,有直接 resolve,没有异步取得后 resolve,各个页面的 onShow:async ()=>{}或 onLoad:async ()=>{}里,都先 await 调用一下这个方法

  • 資深大佬 : varzy

    我使用的方法类似于 8 ,只不过是用了回调的语法。简单给个 demo 吧,写得不好勿喷。

    <script async src=”//jsfiddle.net/varzy/nk2071se/1/embed/js/”></script>

  • 資深大佬 : sujin190

    或者在全局重新定义一下 Page,这样就是可以直接替换掉每个页面的 onLoad 方法,加入等待 onLaunch 加载完的流程就好了

  • 資深大佬 : varzy

    @varzy #9 不知道怎么插入 jsfiddle 的预览。。。放个链接吧: https://jsfiddle.net/varzy/nk2071se/1/

  • 資深大佬 : sjhhjx0122

    @firhome 那就最简单方式,封装一下请求,在发送请求之前判断一下 globalData 里有没有数据,没有数据就先发全局数据的那个请求,拿到数据在请求当前请求

  • 主 資深大佬 : firhome

    @sujin190 我正在尝试这个方法,但发现 onLoad 会不停的重新加载,有 demo 可以学习下吗?

  • 資深大佬 : tjxone

    将获取去全局数据的方法挂载再 app.js 上,该方法用 promise 封装好,作好缓存判断
    后面每个页面的请求都先调用这个方法再请求各自页面的数据就可以了

    app.js
    getGlobalData(){return new Promise((resolve,reject)=>{ 先判断有无全局数据,无就请求数据再 resolve })}

    其他各个页面
    getApp().getGlobalData.then(自己的业务)

  • 資深大佬 : sam014

    第二项感觉不错,顺便还能加个开屏广告,2333333333333

    小程序用的 taro+mobx,全局数据放 mobx + run 调用 ,感觉比原生语法方便多了

  • 資深大佬 : totoro52

    @firhome 因为你在这里做网络请求,如果你从服务器拉取一些特定的全局属性,还没拉取完就加载下个方法了 因为它是异步的,如果下面的方法用到这些属性就炸了 ,如果你非要在这做请求,你的第二个方案是可以的

  • 資深大佬 : tjxone

    @sam014 第二项的话,如果分享页面就无法跳过去了

  • 資深大佬 : sam014

    @tjxone 没有完美的方案,有舍有得,所以我选 taro+mobx

  • 資深大佬 : cczeng

    弱弱的问一下,发布订阅模式不适用吗

  • 資深大佬 : phpcxy

    第二个方案没考虑非首页进入的情况啊?

  • 資深大佬 : preach

    @hiro0729 +1

  • 資深大佬 : zhyl

    第二种方案,然后在 app.onShow 中进行数据加载和页面跳转

  • 資深大佬 : MENGKE

    可以用 defineProperty 吧,或者 ES6 的 proxy ;
    https://blog.csdn.net/qq_17497931/article/details/108109947

  • 資深大佬 : nekochyan

    我们的解决方案 第一步就像你说的那样 onLaunch 的时候去本地存储找是否有这部分数据,如果有不请求,直接使用
    第二个是写一个通用的事件通知,没数据的话注册监听在 onLaunch 里面,然后数据返回的时候 trigger 一下事件所有监听的地方就刷新了

  • 資深大佬 : nekochyan

    就是上说的发布订阅模式

  • 資深大佬 : lutian

    aa

  • 資深大佬 : GzhiYi

    响应式原理可解。
    懒得写的话用 omix 。
    https://github.com/Tencent/omi/tree/master/packages/omix

  • 資深大佬 : zmlq7

    我做了些封装
    1. app.ts 检查 token 是否存在,存在则直接请求 token,不存在则先请求 token,再请求全局公共数据(这里的判断是放在 store 里的)
    2. 封装 http 请求,没有 token 则拦截所有的请求,先把 token 请求到再把拦截的请求全部放行(这里的判断是放在 http 的封装里的)

    有一种情况就是,页面内的请求依赖全局的内容时,这里涉及到顺序。页面我用了 computed 插件,watch 监听 store 里被依赖的数据。如果被依赖的数据为空,则不执行,等到 app.ts 里请求到了全局公共数据,触发 wetch,再请求。

  • 資深大佬 : SakuraKuma

    patch 一下 Page, hook 一下 onload 加绑个事件, app 获取完数据 trigger/emit.

  • 資深大佬 : zmlq7

    全局的 store 和 computed 插件 这个官方的扩展里都有,引到项目里用就可以了
    https://developers.weixin.qq.com/miniprogram/dev/extended/utils/computed.html

  • 資深大佬 : zmlq7

    啊 上面的写错了
    1. app.ts 检查 token 是否存在,存在则直接请求全局公共数据,不存在则先请求 token,再请求全局公共数据(这里的判断是放在 store 里的)

  • 資深大佬 : yehuzi

    发布 /订阅模式应该可以解决主的问题吧: https://aotu.io/notes/2017/01/19/wxapp-event/

  • 資深大佬 : aninchiron

    接管 Page 全局方法,代理一下 onLoad 这些生命周期方法,然后就可以接入 redux 了,爽歪歪

  • 資深大佬 : ersic

    了解一下预加载跟周期性拉取得特性

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具