在平时的单页面项目里,大家肯定接触过axios库,一个易用、简洁且高效,使用Promise管理异步,告别传统callback方式的http库。
最近有个项目里接口调取的频率比较高,接口队列长,然后等待数据的时间就是痛苦的煎熬,特别是一连串有关联的数据交互,每次打开页面我都有种欲死的感觉。经过一番深思改造后,除去接口本身的速度,对于页面的流畅度提高了不少,所以今天就和大家分享一下,怎么封装二次Axios,取消重复请求和接口缓存。
安装Axios
npm install axios
Axios基本配置
根目录下新建axios.config.js文件,先写入请求拦截器,响应拦截器,其中要注意接口请求失败的信息处理,根据status判断是否要进行额外的处理,例如下面例子判断statue为401则清除token,重新登录,如果有error.message 就返回错误信息代码100002,用于页面判断显示错误信息。
/** axios封装 请求拦截、响应拦截 */
取消重复接口
新建一个数组taskList用于存储接口请求任务队列,接口请求流程如下图。例如请求A接口的时候,先判断A接口是否存在于taskList里,如若存在则axios.CancelToken方法取消前一个A接口,然后往队列里增加本次A接口,等到请求完成的时候,再将A接口移除taskList,以此类推就完成一个动态任务队列啦。
/** axios封装 请求拦截、响应拦截 */
接口缓存,避免资源过度消耗
对于调用频率高、数据变化较小的接口,可以根据情况进行适当时间的缓存,第二次调取的时候直接取缓存加载,既可以优化接口任务队列,更能节省时间和资源。
新建一个Map集合cachMap用于存放接口缓存集合,接口进行流程有所改变,如下图。请求A接口的时候,先判断是否有同样的请求存在于队列中,如有则取消,不同点在于,如若接口没有取消则判断接口则判断是否有缓存且处于有效期内,判断成功则返回缓存,反则队列新增接口,请求完成的时候将结果缓存,请求A移除队列。
/** axios封装 请求拦截、响应拦截 */
接口请求的时候,如果需要缓存需要在header里增加expirationTime(ms),代码如下。
return
接口请求的时候回重定义exprianTime字段为空。
最后我还考虑过,如接口缓存时间较长,可以考虑将apiCach里的cachMap缓存于localstorage,然后定期更新,这样每次打开页面或者刷新的时候,也可以有效缓解首页加载速度,但是目前项目利用率不是很高,所以就没使用。
当然如果大家还有什么好的优化可以留言告诉我哦。
如果觉得《单页面axios_Axios封装之取消重复请求和接口缓存》对你有帮助,请点赞、收藏,并留下你的观点哦!