共计 916 个字符，预计需要花费 3 分钟才能阅读完成。
场景，页面中有多个子模块（如 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…