记录vue+axios+adapter实现数据缓存

import cache from '@/utils/cache'

//request拦截器

service.interceptors.request.use(config => {
  //只对部分接口数据缓存
  if ((config.url.indexOf('system/assetequipmentsort/jsoncode') > -1){
    let urls = getUrl(config)
    let value = cache.session.getJSON(urls)
    if (value){
      console.log(urls,value)
      config.adapter = ()=>{
        return new Promise((resolve, reject) => {
          resolve({
            config:config,
            headers:config.headers,
            request:config.request,
            data: value,
            status: 200,
            statusText: 'OK'
          })
        })
      }
    }
  }
})

//响应拦截器

service.interceptors.response.use(res => {
 //只对部分接口数据缓存
if ((res.config.url.indexOf('system/assetequipmentsort/jsoncode') > -1){
  if (res.data){
    let urls = getUrl(res.config)
    let value = cache.session.getJSON(urls)
    if (!value){
      cache.session.setJSON(urls,res.data)
    }
  }
}
  return res.data
})

//处理url作为key

function getUrl(config) {
  let url = config.url
  if (config.params && config.method == 'post'){
    if (url.indexOf('?') > -1) {
      url = url + '&';
    } else {
      url = url + '?';
    }
    for (const propName of Object.keys(config.params)) {
      const value = config.params[propName];
      var part = encodeURIComponent(propName) + "=";
      if (value !== null && typeof (value) !== "undefined") {
        if (typeof value === 'object') {
          for (const key of Object.keys(value)) {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            url += subPart + encodeURIComponent(value[key]) + "&";
          }
        } else {
          url += part + encodeURIComponent(value) + "&";
        }
      }
    }
    url = url.slice(0, -1);
  }
  return url
}

//cache.js
const sessionCache = {
  set (key, value) {
    if (!sessionStorage) {
      return
    }
    if (key != null && value != null) {
      sessionStorage.setItem(key, value)
    }
  },
  get (key) {
    if (!sessionStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return sessionStorage.getItem(key)
  },
  setJSON (key, jsonValue) {
    if (jsonValue != null) {
      this.set(key, JSON.stringify(jsonValue))
    }
  },
  getJSON (key) {
    const value = this.get(key)
    if (value != null) {
      return JSON.parse(value)
    }
  },
  remove (key) {
    sessionStorage.removeItem(key);
  }
}

const localCache = {
  set (key, value) {
    if (!localStorage) {
      return
    }
    if (key != null && value != null) {
      localStorage.setItem(key, value)
    }
  },
  get (key) {
    if (!localStorage) {
      return null
    }
    if (key == null) {
      return null
    }
    return localStorage.getItem(key)
  },
  setJSON (key, jsonValue) {
    if (jsonValue != null) {
      this.set(key, JSON.stringify(jsonValue))
    }
  },
  getJSON (key) {
    const value = this.get(key)
    if (value != null) {
      return JSON.parse(value)
    }
  },
  remove (key) {
    localStorage.removeItem(key);
  }
}

export default {
  /**
   * 会话级缓存
   */
  session: sessionCache,
  /**
   * 本地缓存
   */
  local: localCache
}

sessionCache只能储存4M数据，储存大量数据需要用indexedDB