Axios adapter 实现缓存接口数据

直接上代码

cache.js

import axios from 'axios'

/**
 * API
 * time 表示可缓存的时间，默认为 0，在没有清除内存之前永久缓存（浏览器窗口标签关闭，应用程序关闭等会清除内存）
 *
 * 防止重复提交
 * time 设置一个极短的时间，比如 1000，就表示在1000毫秒之内不会重复向服务器发出请求
 */

// 数据存储
export const cache = {
  data: {},
  set(key, data) {
    this.data[key] = data
  },
  get(key) {
    return this.data[key]
  },
  clear(key) {
    delete this.data[key]
  },
}

// 建立唯一的key值
export const buildUniqueUrl = (url, method, params = {}, data = {}) => {
  const paramStr = obj => {
    if (toString.call(obj) === '[object Object]') {
      return JSON.stringify(
        Object.keys(obj)
          .sort()
          .reduce((result, key) => {
            result[key] = obj[key]
            return result
          }, {})
      )
    } else {
      return JSON.stringify(obj)
    }
  }
  url += `?${paramStr(params)}&${paramStr(data)}&${method}`
  return url
}

/**
 * @param {object} options
 * @param {number} options.time=0 默认缓存
 */
export default ({ time = 0 } = {}) => async config => {
  config.url = config.url.replace(/t=\d+&?/, '')
  const index = buildUniqueUrl(
    config.url,
    config.method,
    config.params,
    config.data
  )
  let responsePromise = cache.get(index)
  if (!responsePromise) {
    responsePromise = (async () => {
      try {
        const response = await axios.defaults.adapter(config)
        return Promise.resolve(response)
      } catch (reason) {
        cache.clear(index)
        return Promise.reject(reason)
      }
    })()
    cache.set(index, responsePromise)
    if (time !== 0) {
      setTimeout(() => {
        cache.clear(index)
      }, time)
    }
  }
  return responsePromise.then(data => JSON.parse(JSON.stringify(data))) // 为防止数据源污染
}

api.js

import axios from 'axios'
import cache from 'cache'

export function getUserList(params = {}) {
  return axios.get('/user-list', {
    params,
    adapter: cache(),
  })
}