在平时的单页面项目里，大家肯定接触过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封装之取消重复请求和接口缓存》对你有帮助，请点赞、收藏，并留下你的观点哦！
