单页面axios_Axios封装之取消重复请求和接口缓存

在平时的单页面项目里，大家肯定接触过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封装之取消重复请求和接口缓存相关推荐

axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
php多次请求只执行最后一次,取消重复请求，只让最后一次请求通过
axios 请求拦截取消重复请求(多次重复异步,结束pending状态) 前端开发中,会涉及很多异步事件处理,页面展示的处理关系最密切的就是loading图层,但是loading交互在一些时候会不太 ...
关于 axios 取消重复请求的分析
前言关于取消重复请求,最重要的是这么做的意义,而不在于代码的实现其实,我觉得,绝大部分能够想到的应用场景,都可以通过防抖.节流方式实现,比如实时搜索,比如重复订单提交.比如上拉获取最新数据等我们 ...
axios封装 —— 数据缓存、防止重复请求、动态加载
前言看了网上很多axios的封装,感觉都不是特别完善.于是我写了个比较完整的封装包括以下功能: 上传下载文件时的header设置错误相应的统一处理动态加载api 数据缓存.清除缓存.缓存级别.最 ...
如何优雅的解决”重复请求“问题
作者:舒丽琦|奇舞团前端开发工程师 https://75.team/ 在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅 ...
axios 拦截重复请求
博客地址:http://www.globm.top/blog/1/detail/48 一直想封装一下 axios, 可以方便项目中使用,今天刚好看到一位大佬的文章,就保存了过来,方便下次使用 axi ...
关于单页面应用一些随想
前面不短时间持续投入了时间在做 React 应用架构方面的考量一个是冒险进行了一次应用架构的调整, 另一个是跟进了 Redux 的进展当然, 实际上是同一个事情. 也许错过的比收获的还多一些不过 ...
axios拦截器拦截重复请求
取消重复请求万能模板. import axios from 'axios' const baseURL = "http://xxxx"; const instance = axi ...

单页面axios_Axios封装之取消重复请求和接口缓存

单页面axios_Axios封装之取消重复请求和接口缓存相关推荐

最新文章

热门文章