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.