f-cache-memory

npm i f-cache-memory

中文文档

cache memory library

import CacheMemory from 'f-cache-memory'

const cache = new CacheMemory()
cache.setCache('aaa', 111)
cache.setCache('bbb', 222)
console.log(cache.getCache('aaa'))
console.log(cache.getNowCache())
console.log(cache.getPreviousCache())
cache.setCache('ccc', 333)
console.log(cache.getNowCache())
console.log(cache.getPreviousCache())
console.log(cache.getNextCache())
console.log(cache.getCacheToArray())

const localCache = new CacheMemory(100, 100000, (data) => {
  localStorage.setItem('localCache', JSON.stringify(data))
})
localCache.setCache('aaa', 111)
localCache.setCache('bbb', 222)

const initCache = new CacheMemory()
const localStorageCache = localStorage.getItem('localCache')
if (localStorageCache) {
  initCache.initCache(JSON.parse(localStorageCache))
}
console.log(initCache.getCacheToArray())

Vue:

const cacheList = ref<[string, any][]>([])
const localCache = new CacheMemory(100, 100000, (data) => {
  cacheList.value = data
})

React:

const [cacheList, setCacheList] = useState<[string, any][]>([])
const localCache = new CacheMemory(100, 100000, (data) => {
  setCacheList(data)
})

export interface CacheValueType {
  dateTime: number;
  data: any;
}

Initialize parameters

|parameter|default|description|version| |------|----|------|----| | size?: number | 100 | How many can be cached at most || | expiration?: number | Number.MAX_SAFE_INTEGER | Set the cache validity period in milliseconds, and if it exceeds the time, it will be deleted || | change?: (data: [string, CacheValueType][]) => void | - | When the cache changes, external data can be synchronized within this method | change in v0.0.7+ |

api

|api|parameter|typeof return|description|version| |----|----|----|----|----| | initCache | data: [string, CacheValueType][] | - | Initialize cached data | initCache in v0.0.7+ | | hasCache | key: string | boolean | Verify if it is in cache || | setCache | key: string, data: any, expiration?: number | - | Set cache, expiration sets the cache validity period in milliseconds, with priority higher than the initialized expiration parameter. If not set, it defaults to the initialized expiration parameter | expiration in v0.0.3+ | | getCache | key: string | any | Retrieve cache || | deleteCache | key: string | - | Delete Cache || | deleteCacheByStarts | url: string | - | Delete cache based on the prefix of key values || | clearCache | - | - | Clear Cache || | cacheSize | - | number | Cache Size || | getNowCache | - | any | Retrieve the current cache, which defaults to the last one, getPreviousCache/getNextCache/goPostionCache/goAbsPostionCache will affect the current cached value || | getPreviousCache | - | any | Cache the previous cache in the set order || | getNextCache | - | any | Cache the next cache in the set order || | goPostionCache | num: number | any | Retrieve cache relative to the current cache, where 1 is the next and -1 is the previous || | goAbsPostionCache | num: number | any | Retrieve the numth cache in the order set || | getCacheToArray | needTime: boolean = false | [string, CacheValueType][] \| [string, any][] | Convert to an array in the order set. If the parameter is false, return the set data directly. If it is true, return {dateTime: expiration time, data: set data} | dateTime parameter in v0.0.7+ |

export interface CacheValueType {
    dateTime: number;
    data: any;
}
export type isArrayNeedTime<T> = T extends true ? [string, CacheValueType][] : [string, any][];
export default class CacheMemory {
    #private;
    constructor(size?: number, expiration?: number, change?: (data: [string, CacheValueType][]) => void);
    hasCache(key: string): boolean;
    setCache(key: string, data: any, expiration?: number): void;
    getCache(key: string): any;
    deleteCache(key: string): void;
    deleteCacheByStarts(url: string): void;
    clearCache(): void;
    initCache(data: [string, CacheValueType][]): void;
    cacheSize(): number;
    getNowCache(): any;
    getPreviousCache(): any;
    getNextCache(): any;
    goPostionCache(num: number): any;
    goAbsPostionCache(num: number): any;
    getCacheToArray<T extends boolean = false>(needTime?: T): isArrayNeedTime<T>;
}

Usage scenario

axios cache

example

// httpCache.ts
import type { AxiosRequestConfig } from 'axios'
import CacheMemory from 'f-cache-memory'

const httpCache = new CacheMemory()
// const httpCache = new CacheMemory(100, 1000)

export function configToKey(config: AxiosRequestConfig): string {
  let key = config.url as string
  if (config.params) {
    key += JSON.stringify(config.params)
  }
  return key
}

export default httpCache

The encapsulation adjustments for axios are as follows

...
import httpCache, { configToKey } from './httpCache'
...
instance.interceptors.response.use(
  (response) => {
    if (response.status === 200 && response.config.method === 'get') {
      const curHttpCacheKey = configToKey(response.config)
      httpCache.setCache(curHttpCacheKey, response)
    }
    return response
  },
  (error) => {
    return Promise.reject(error)
  }
)
...
export function get<T = any>(url: string, config: AxiosRequestConfig = {}): Promise<T> {
  const curHttpCacheKey: string = configToKey({
    url,
    ...config
  })
  if (!httpCache.hasCache(curHttpCacheKey)) {
    const httpRequest = instance.get(url, config)
    httpCache.setCache(curHttpCacheKey, httpRequest)
    return httpRequest as Promise<T>
  } else {
    return Promise.resolve(httpCache.getCache(curHttpCacheKey))
  }
}

Firstly, encapsulate the request and check if it is in the cache before sending the get request. Set the cache value in the interceptors.response.

Fallback function

In some areas that require rollback functionality, this cache supports various caching operations such as getNowCache/getPreviousCache/getNextCache/goPostionCache/goAbsPostionCache.