前言
通常会在项目中有这么些情况发生，比如每次页面切换的时候都会请求接口，如果频繁切换，也就会导致接口频繁的请求，而且在数据基本没有什么变动的情况下，这样的做法明显是浪费网络资源的。所以我们出于考虑，要实现接口的缓存，避免频繁的去请求接口。如果后端同学不给于帮助的话。。。那我们就进入今天的主题--前端缓存。(当然，能 http 缓存就 http 缓存最好了~)
怎么做?
思路
这里我们使用axios进行接口的请求，我们要用到axios的两个功能--拦截器和cancleToken。首先我们要使用拦截器，去拦截要发送的请求，然后对比我们本地缓存池，看是否有在缓存池中存在，如果存在，则使用cancleToken直接取消请求，并从缓存池从返回数据，如果不存在则正常请求，并在响应拦截器中将该条请求存入缓存池中。当然，我们还需要一个过期时间，如果过期，则重新请求，更新缓存池的数据，避免一直在缓存池中取老数据。
流程
具体流程图入下：
流程图
提示
上图右侧的俩响应拦截器其实同属一个拦截器，这里为了区分，所以拆分成俩。
