Start to design

As an 8 year old, I prefer to figure out how to use it before designing the code, and then implement it. After thinking about it, I think it would be better to use it like the following:

Enable result caching for an interface

export function fetchList () {
  return request.cache('the cache key').get('/myinterface')}Copy the code

When calling the interface, specify that the cache is fetched first

fetchList()
  .cache() // If you need to force a call to the interface to get it, remove the method.
  .then(data= > {})
  .catch(e= > {})
  .finally(() = > {})
Copy the code

According to?

Why do you use it this way?

• In terms of interface invocation, there are two cases of fetching from cache and fetching from interface, which makes it more flexible to use.
• In terms of interface definition, we definitely need a cache key. But why can’t the cache key just default to the interface argument? Since interfaces may not need parameters, why not just use the interface address by default? Because in restful style, the interface is the same, but the request method is different. Then why can’t use interface + parameter directly, this tests the designer to design consciousness. From a design point of view, interface addresses plus parameters can be unique, but they are unpredictable and therefore not recommended.

Code implementation

I can’t say the code is simple, it’s a small amount of code, but it does need to be sorted out.

// Cache the result of the request
const buildCachePromise = (cacheKey, method, args, cacheImpl) = > {
  return {
    __cacheImpl: cache[cacheImpl],
    __arguments: args,
    __result_promise: null.// Enable caching
    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
}
Copy the code

I said I wrote the code myself, but I have to say that I looked at it myself again and I had to sort it out. But it doesn’t matter, just use it! This code is extracted from my open source framework Eva. We’ll talk more about code design later.

The main purpose of Eva open source framework is to be able to carry out rapid development projects, and also to develop a set of good development standards, for the novice, but also to be a set of good learning projects.

• Eva Open Source Framework GITEE: gitee.com/coderd-repo…
• Eva Open Source framework GITHUB: github.com/coderd-repo…

Welcome to star!

Pay attention to me!!!!!!! Discuss the art of code design with you.