Front-end interface cache and unified management

Because the data of the latest product is historical data, that is to say, the same result will be returned if the parameters are requested for many times. In order to reduce loading when switching pages, we cache the data. The initial solution was to write the cache in the current page, but I found that there was too much code to clear the cache at one time, so I thought of unified management

Requirements: interface cache, can be a clear cache, cache can not cache, small amount of code.

Ideas:

• Store and manage data uniformly: Define an array cacheData
• Flush once: cacheData = []
• Cacheable or not: Define a parameter (isCache) to check
• Consider that the front end wraps the request: you can add an intermediate layer to the wrapped method to determine whether to fetch data from the cache (requestCacheWrapper).

Implementation:

request.ts

interface CacheDataItem {
  apiDataString: string
  data: any
}

// Cache data is stored here
let cacheData:Array<CacheDataItem> = []
// Approximately 60 interface data are cached when table sorting is not included in the overview and active pages
const cacheDataMaxLength:number = 100

// Clear the cache
export const wipeCache = () = > {
  cacheData = []
}

// Get the cached data index
const getCacheIndex = (apiDataString, cacheData) = > {
  if (cacheData.length === 0) {
    return -1
  }
  return cacheData.findIndex(item= > {
    return item.apiDataString === apiDataString
  })
}

...
  if (statusCode == 200 && data.code == 0) {
    if (o.isCache) { // Cache data
      cacheData.push({
        apiDataString: getApiDataString(api,oData), // Don't fetch O.datas directly because formatRequestParams converts O.datas to get requests
        data
      })
      if (cacheData.length > cacheDataMaxLength) {
        cacheData.shift()
      }
    }
    return Promise.resolve(data)
  }
...

// Get the set of strings converted from API and request parameters to strings
const getApiDataString = (api, data) = > {
  data && delete data['_']
  return `${api}The ${JSON.stringify(data)}`
}

// Determine whether to fetch cache
const requestCacheWrapper = async (api, o: RequestOptions, options? : AuthRequestExtensionOptions) => {if (o.isCache) {
    let apiDataString = getApiDataString(api, o.data)
    let cacheIndex = getCacheIndex(apiDataString,cacheData)
    if(cacheIndex ! = = -1) {
      // Place the data in the last bit of the array after fetching the data (frequently used data is placed at the end of the array to prevent deletion)
      let resData = cacheData.splice(cacheIndex, 1)
      cacheData.push(resData[0])
      return resData[0].data
    } else {
      return request(api, o, options)
    }
  } else {
    return request(api, o, options)
  }
}
Copy the code

api

export const getData = (data, isCache: boolean = false) = > {
  return request('/data/getdata', {
    method: 'POST',
    data,
    isCache
  })
}
Copy the code

Interface call

getData(data, true)
Copy the code