axios实现前端数据缓存

const axiosConfig = {
  method: 'POST',
  headers: {
    'Access-Control-Allow-Origin': '*',
    ...iframePageExcluHeader
  },
  withCredentials: true, // default
  responseType: 'json'
}

const microGovernanceMap = new Map()
const CancelToken = axios.CancelToken
// create an axios instance
const request = axios.create(axiosConfig)
// request 拦截器
request.interceptors.request.use(
  config => {
    config.url += config.url.match(/\?/) ? '&' : '?'
    // 批量给所有接口添加sysId参数
    config.url += '_r=' + new Date().getTime().toString()
    const { method, url, data, params, cache } = config
    const filterTimeUrl = url.split('_r=')[0]
    // 接口配置缓存，如果之前请求的存在(api+请求条件)就直接取
    if (cache) {
      const source = CancelToken.source()
      config.cancelToken = source.token
      const key = `${filterTimeUrl}_${JSON.stringify(method === 'get' ? params : data)}`
      if (microGovernanceMap.has(key)) {
        source.cancel(microGovernanceMap.get(key))
      }
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)
// response 拦截器
request.interceptors.response.use(function (response) {
  const { method, url, params, data, cache } = response.config
  const filterTimeUrl = url.split('_r=')[0]

 //   配置过缓存，没有缓存就存储
  if (cache) {
    const key = `${filterTimeUrl}_${method === 'get' ? JSON.stringify(params) : data}`
    if (!microGovernanceMap.has(key)) {
      microGovernanceMap.set(key, response.data)
    }
  }
  return response.data
}, async function (error) {

 // 判断是不是请求中断的，直接resolve
  if (axios.isCancel(error)) {
    return Promise.resolve(error.message)
  }
  return Promise.reject(error)
})

最主要的是运用CancelToken的请求中断和map中的has(),get(),set()和axios.isCancel()方法