开始设计

作为8年前端的我，在设计代码之前，我比较喜欢先想好怎么用，然后再去实现。想来想去，我觉得像先下面这样使用会比较好一些：

针对某个接口开启结果缓存

export function fetchList () {
  return request.cache('缓存key').get('/myinterface')
}

调用接口的时候指定先从缓存中获取

fetchList()
  .cache() // 如果某情况需要强制调用接口来获取，则去掉该方法即可。
  .then(data => {})
  .catch(e => {})
  .finally(() => {})

WHY？

为什么这么使用？

在接口调用方面，可以满足从缓存中获取和强制从接口中获取两种情况，这样使用起来会比较灵活一些。
在接口定义方面，我们一定需要一个缓存键。但这个缓存键为什么不能直接默认使用接口参数？因为接口可能无需参数，那为什么不能直接默认使用接口地址？因为restful风格下接口是一样的，只是请求方式不一样。那为什么不能直接使用接口+参数，这就考验设计者对设计的觉悟了。从设计角度来讲，接口地址加参数的确可以标识唯一，但存在不可预见性，所以也不建议这么做。

代码实现

我不能说代码很简单，虽然代码量不大，但的确需要理一下。

// 缓存请求结果
const buildCachePromise = (cacheKey, method, args, cacheImpl) => {
  return {
    __cacheImpl: cache[cacheImpl],
    __arguments: args,
    __result_promise: null,
    // 开启缓存
    cache () {
      const data = this.__cacheImpl.getJSON(cacheKey)
      if (data != null) {
        this.__result_promise = Promise.resolve(data)
      }
      if (this.__result_promise != null) {
        return this.__result_promise
      }
      return this
    },
    then () {
      return this.__access('then', arguments)
    },
    catch () {
      return this.__access('catch', arguments)
    },
    finally () {
      return this.__access('finally', arguments)
    },
    __access (methodName, args) {
      if (this.__result_promise != null) {
        return this.__result_promise
      }
      this.__result_promise = axiosInstance[method].apply(axiosInstance, this.__arguments)
      this.__result_promise.then(data => {
        this.__cacheImpl.setJSON(cacheKey, data)
        return data
      })
      return this.__result_promise[methodName].apply(this.__result_promise, args)
    }
  }
}
const methods = ['get', 'post', 'delete', 'put', 'head', 'options', 'patch', 'request']
axiosInstance.cache = function (cacheKey, isLocal = false) {
  if (cacheKey == null) {
    throw Error('Request cache key can not be null.')
  }
  const cacheAxiosInstance = {}
  for (const method of methods) {
    cacheAxiosInstance[method] = function () {
      return buildCachePromise(cacheKey, method, arguments, isLocal ? 'local' : 'session')
    }
  }
  return cacheAxiosInstance
}