前端代碼設計之優雅的緩存Axios請求結果

開始設計

做爲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
}
複製代碼

代碼雖說是我本身寫的，可是，我不得不說我本身再看一遍，我仍是得理一理。不過不重要，好用就行！這套代碼是從個人開源框架Eva中提取出來的。後面還會跟你們介紹更多代碼設計方面的內容。

Eva開源框架的主要目的呢，是可以進行快速開發項目，而且還能養成一套良好的開發規範，對於新手而言呢，也要作到是一套好的學習項目。

• Eva開源框架GITEE：gitee.com/coderd-repo…
• Eva開源框架GITHUB：github.com/coderd-repo…

歡迎star！

關注我！和你一塊兒探討代碼設計的藝術。