场景，页面中有多个子模块（如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...