前端缓存列表数据 设计思路和处理,应对大量并发的问题简易处理方案

大家好，欢迎来到IT知识分享网。

我一直觉得 前端程序猿的水平有的时候真的和他所处的公司处理业务也有一定的关系

公司有大量的并发业务处理,这个要求前端也要掌握一定的优化本领,
记得之前当我还是小白的时候看见的一道面试题

js前端面试题，js实现最多发送三个并发请求，后续有多个请求在等待发送，请设计思路?

对我我这个小白来说实际的业务没有碰见过这个业务 确实还真的不好想出来解决方案,难就难在创造一个以前没有见过或者经历过的东西.

应该大多数人都会难在第一步 可能第一步都迈不出, 难就难在第一步吧.

好了 闲话说的有点多了 我们步入正题

1. 对于这个中缓存的问题 我首先考虑到了 本地缓存localstorage
2. 当有缓存的时候 直接将缓存返回就行,没有的话写入缓存
3. 要支持过期机制 不能一直处于缓存数据
4. 支持分页列表数据

刚开始的我就想到了 怎么支持分页 而且每个分页的数据也支持 过期机制
让我想到了之前写的一个支持过期的storage的小demo

前端小白闲着没事，封装一个可以设置过期时间的localStorage存储函数，在vue脚手架中使用

然后支持过期的机制也实现了

2. 然后就是考虑 列表每一页的数据 怎么是唯一的 而且每个接口的列表还互不影响

这里我用了对象的形式 // 为了 保证的数据的唯一
我把key值 按照下面的设计
let key = md5(接口名 + 接口请求参数) 作为key值 存到缓存中
{

key: res.data
}

3. 再其次就是在哪里作为拦截呢

这个其实也好说 在 封装的请求方法 哪里

let cache = storage.getItem(md5(接口名 + 接口请求参数) );
if(cache) { 
   
	resolve(cache)
} else { 
   
	// 否则就去请求接口
	http.post().then(() => { 
   
		storage.setItem({ 
   
			value: res.data,
			name: md5(接口名 + 接口请求参数) ,
			expires: 500000 // 毫秒数
		})
	})
}

曾经我也考虑过我的一位朋友说的vuex 但是后来我还是给放弃,因为每次都要给vuex 塞数据 又多了一步 没必要
不过还是要感谢下她

总体上 就实现来 前端数据的缓存 (当然不适合大量存储哈,毕竟这些都是存储在客户端了 哈哈哈)

关注我 持续更新前端知识。