场景,页面中有多个子模块(如 A、B、C),会发送同一个 http 申请(多个模块发送的 http 申请参数雷同)。这些模块彼此独立,页面中可能有些时候用到 A、B 模块,有些时候用到 B、C 模块。模块加载有先后顺序,且不固定,A、B、C 模块都有可能第一个加载。
我的项目是通过更改 Promise chain + cache 的模式实现从图 1 到图 2 的模式,防止反复发送 http 申请。
图 1 ↑
图 2 ↑
如果是上面的图 3 到图 4,用防抖解决。
图 3 ↑
图 4 ↑
理论我的项目是一个 vue 我的项目,因为模块 A、B、C 相互独立,且层级关系并不同级,在这个场景里,入口页面发一次申请,做数据处理再分发给三个模块这样数据传递模式不适合。
思考下来,在 vue store(vuex)的 actions 中发送 http 申请,解决数据(初加工,加工公共局部),缓存数据(交给 vuex state)这种形式,子模块自行取用。
依照这个思路实现,要解决上面几个问题:
1、判断是雷同的申请。
2、缓存后果,func1 来申请数据时,在缓存中查找后果是否存在;如果后果存在,子模块申请数据时,不再发送第二次 http 申请。
3、定时清理缓存。(非必须)
1、判断雷同的申请,最欠缺的实现形式当然是 hash,这里不是本文要讲的重点,略。
2、缓存后果,这里的后果不是 http 申请返回之后的数据,而是 http 曾经发送的状态。
阐明:
在第一次发送 http 申请之后,这个 http 申请的状态(如 pending 状态的 Promise 实例)就必须即刻进入缓存中。不能期待申请实现之后,再将 http 申请的后果放入缓存中。
如果是期待 http 实现后将 http 的后果放入缓存,第 1 个 func1 触发 http1 申请发送未返回后果的阶段,缓存中没有 http1 的后果。此时如果第 2 个 func1 到来,第 2 个 func1 仍然能够触发 http1 发送。
实现:
间接上代码
重点在 actions 中的 new Promise 操作。还要留神如果 http 申请失败,要通过 DELETE_HTTP_RES 操作来清空这个字段。
完结。
代码示例见
https://github.com/DiracKeeko…
同步更新到本人的语雀
https://www.yuque.com/diracke…