怎么生成域名做网站,免费网站空间怎么做,注册商标设计,网络推广的方式有哪些?问题起因
起因是某次发版之后#xff0c;服务器接口压力过大#xff0c;当场宕机#xff0c;排查之后发现有个接口在首页被调十来次#xff08;六七年的老项目了#xff0c;都是泪呀#xff09;#xff0c;后端反馈这个接口的sql很复杂#xff0c;很耗性能#xff0c…问题起因
起因是某次发版之后服务器接口压力过大当场宕机排查之后发现有个接口在首页被调十来次六七年的老项目了都是泪呀后端反馈这个接口的sql很复杂很耗性能临时把这个接口放到登录后只执行一次数据缓存在 localStorage 内后续这个接口都直接从 localStorage 中取。
虽然临时解决了宕机问题但还是会有多个组件内同时发起多个相同请求的问题。现在也有很多请求库带有缓存功能但是这是老项目请求只封装了 axios 换个请求库风险又很高最终决定自己搞搞。
思路历程
当时最初的想法就是在 axios 拦截器内做判断首先在 interceptors.request 中判断缓存中是否有对应的请求在 interceptors.response 中赋予缓存设置。
但很快问题就来在 interceptors.request 判断有缓存之后再取消这个缓存吗搞了搞又发现个问题当某个请求已发起但是还没返回这个时候这个请求又发起了这不没解决问题。
然后又想着在 interceptors.request 中先让请求占位这样多个组件同时发起某个请求只要第一个占位了后续的都取消。问题又来了后续请求取消之后后续逻辑又不触发了。后面突然想到我可以在请求之前做检测当对应接口已经在缓存中时就直接返回当前缓存中的值缓存不存在再发起这个时候肯定会想那第一个已经发起的还未返回的后续相同接口从缓存中拿到的值如何出发后续逻辑呢
请求本身返回的是 promise那我先把 promise 存入缓存相同接口再请求时直接返回缓存中的 promise 这样后续逻辑可以正常触发。
最终方案
最终实现如下仅 get 请求做接口缓存
export function getT any(url: string, config: AxiosRequestConfig {}): PromiseT {const curHttpCacheKey: string configToKey({url,...config})if (!httpCache.hasCache(curHttpCacheKey)) {const httpRequest instance.get(url, config)httpCache.setCache(curHttpCacheKey, httpRequest)return httpRequest as PromiseT} else {return Promise.resolve(httpCache.getCache(curHttpCacheKey))}
}对 get 请求再做个封装缓存中以请求链接和 query拼接的字符串作为 keyhttpCache 后续会讲 configToKey 实现如下
export function configToKey(config: AxiosRequestConfig): string {let key config.url as stringif (config.params) {key JSON.stringify(config.params)}return key
}然后在 interceptors.response 中赋予缓存值
instance.interceptors.response.use((response) {if (response.status 200 response.config.method get) {const curHttpCacheKey configToKey(response.config)// 缓存中设置的值要和下面 return 的结果一致httpCache.setCache(curHttpCacheKey, response)}return response},(error) {return Promise.reject(error)}
)下面说下 httpCache
import CacheMemory from f-cache-memoryconst httpCache new CacheMemory()
export default httpCache缓存库 f-cache-memory
初始化一个库就行了f-cache-memory 就是我专门开发的库底层用的 map 有些API也贴近 mapAPI如下
初始化参数
参数默认值描述版本size?: number100最多缓存多少个expiration?: numberNumber.MAX_SAFE_INTEGER按时间毫秒设置缓存有效期超出时间会被删除change?: (data: [string, any][]) void-当缓存变更的时候可以在此方法内同步外部数据新增于 v0.0.7
api
名称参数返回值类型描述版本initCachedata: [string, any][]-初始化缓存数据新增于 v0.0.7hasCachekey: stringboolean验证是否在缓存中setCachekey: string, data: any, expiration?: number-设置缓存expiration 以毫秒为单位设置缓存有效期优先级高于初始化的 expiration 参数未设置时默认为 初始化的 expirationexpiration 新增于 v0.0.3getCachekey: stringany获取缓存deleteCachekey: string-删除缓存deleteCacheByStartsurl: string-根据键值的前缀删除缓存clearCache--清空缓存cacheSize-number有多少个缓存getNowCache-any获取当前缓存默认为最后一个getPreviousCache/getNextCache/goPostionCache/goAbsPostionCache都会影响当前缓存的值getPreviousCache-any按设置顺序前一个缓存getNextCache-any按设置顺序后一个缓存goPostionCachenum: numberany相对当前缓存获取缓存1为后一个-1为前一个goAbsPostionCachenum: numberany按照设置顺序获取第 num 个缓存getCacheToArrayneedTime: boolean false[string, any][]按设置顺序转换为数组如果参数为 false则直接返回设置的数据如果为 true则会返回 { dateTime: 过期时间, data: 设置数据 }dateTime 参数新增于 v0.0.7
同步缓存内外数据
当我们希望缓存内的数据和缓存外联动时我们可以初始化时传入 第三个参数 change 函数 change 函数的参数就是缓存内的数据内部数据的结构是 { dateTime: 过期时间, data: 设置的缓存 }所以如果与 localStorage 联动如下
const localCache new CacheMemory(100, 100000, (data) {localStorage.setItem(localCache, JSON.stringify(data))
})
localCache.setCache(aaa, 111)
localCache.setCache(bbb, 222)那下次再打开浏览器localStorage 内的值如何传递到缓存中此时可以初始化之后使用 initCache :
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)
})实际上面还有个问题就是添加缓存之后什么时候使缓存失效虽然有过期时间一说但设的小了缓存没效果设得大了就涉及需要清缓存。
这里我提供几个思路
过期时间设的小一点仅保证多个组件同时加载接口时做到缓存接口映射表哪些接口改变之后需要清缓存做好映射关系在 interceptors.response 中清除对应缓存这样项目中的代码不用动如果项目完全采用的 REST API 风格可以在 post/put/delete 中清除对应缓存此处有个 例子。
最后我们采用了第一种思路解决服务器临时压力因为接口规范不统一接口映射表又太多一时难以保证齐全。
完整例子可以查看 vue-components 本地运行接口 mock 。
