当前位置: 首页 > Web前端 > HTML

[JS]通过改变Promise链+缓存,在http

时间:2023-03-29 11:29:35 HTML

场景下多个相同的请求只发送一次。页面中有多个子模块(如A、B、C),会发送同一个http请求(多个模块发送相同的http请求参数)。这些模块相互独立。有时页面中可能会用到A、B模块,有时可能会用到B、C模块。模块加载的顺序不固定,模块A、B、C可能都先加载。本项目是通过改变Promise链+缓存的方式来实现图1到图2的模式,避免http请求的重复发送。图1↑图2↑如果是下图3到图4,用防抖解决。图3↑图4↑实际项目是一个vue项目。由于A、B、C三个模块相互独立,层级关系不在同一层级,在本场景中,入口页面发送请求,进行数据处理,然后分发给三个模块,本次数据传递模式不合适。想一想,在vuestore(vuex)、处理数据(初级处理、处理公共部分)、缓存数据(交给vuex状态)的action中发送http请求。这样子模块就可以自己使用了。按照这个思路,必须解决以下问题:1.判断请求相同。2.缓存结果。func1请求数据时,检查缓存中是否存在结果;如果结果存在,则子模块请求数据时,不会发送第二次http请求。3.定期清除缓存。(非必须)1、判断同一个请求,最完美的实现方式当然是hash,这不是本文的重点,所以省略。2.缓存结果。这里的结果不是http请求返回后的数据,而是http发送过来的状态。注意:发送第一个http请求后,http请求的状态(如Promise实例处于pending状态)必须立即进入缓存。您不能等到请求完成后再将http请求的结果放入缓存中。如果在等待http完成后将http结果放入缓存,第一个func1触发http1请求没有发送结果的阶段,缓存中没有http1结果。此时如果第二个func1到来,第二个func1仍然可以触发http1发送。实现:直接进入新的Promise操作,重点看actions中的代码。还要注意,如果http请求失败,应该通过DELETE_HTTP_RES操作清除这个字段。结尾。代码示例见https://github.com/DiracKeeko...同步更新到自己的语雀https://www.yuque.com/diracke...