详解前端API请求缓存方案

在开发 web 应用程序时，性能都是必不可少的话题。对于webpack打包的单页面应用程序而言，我们可以采用很多方式来对性能进行优化，比方说 tree-shaking、模块懒加载、利用 extrens 网络cdn 加速这些常规的优化。甚至在vue-cli 项目中我们可以使用 --modern 指令生成新旧两份浏览器代码来对程序进行优化。

而事实上，缓存一定是提升web应用程序有效方法之一，尤其是用户受限于网速的情况下。提升系统的响应能力，降低网络的消耗。当然，内容越接近于用户，则缓存的速度就会越快，缓存的有效性则会越高。

以客户端而言，我们有很多缓存数据与资源的方法，例如 标准的浏览器缓存 以及 目前火热的 Service worker。但是，他们更适合静态内容的缓存。例如 html，js，css以及图片等文件。而缓存系统数据，我采用另外的方案。

那我现在就对我应用到项目中的各种 api 请求缓存方案，从简单到复杂依次介绍一下。

方案一 数据缓存

简单的 数据 缓存，***次请求时候获取数据，之后便使用数据，不再请求后端api。

代码如下：

1. const dataCache = new Map()  
2. async getWares() {  
3. let key = 'wares'  
4. // 从data 缓存中获取 数据  
5. let data = dataCache.get(key)  
6. if (!data) {  
7. // 没有数据请求服务器  
8. const res = await request.get('/getWares')  
9. // 其他操作  
10. ...  
11. data = ...  
12. // 设置数据缓存  
13. dataCache.set(key, data)  
14. }  
15. return data  
16. }  

***行代码 使用了 es6以上的 Map，如果对map不是很理解的情况下，你可以参考 ECMAScript 6 入门 Set 和 Map 或者 Exploring ES6 关于 map 和 set的介绍，此处可以理解为一个键值对存储结构。

之后 代码 使用 了 async 函数，可以将异步操作变得更为方便。 你可以参考ECMAScript 6 入门 async函数来进行学习或者巩固知识。

代码本身很容易理解，是利用 Map 对象对数据进行缓存，之后调用从 Map 对象来取数据。对于及其简单的业务场景，直接利用此代码即可。

调用方式：

1. getWares().then( ... )  
2. // 第二次调用 取得先前的data  
3. getWares().then( ... )  

方案二 promise缓存

方案一本身是不足的。因为如果考虑同时两个以上的调用此 api，会因为请求未返回而进行第二次请求api。当然，如果你在系统中添加类似于 vuex、redux这样的单一数据源框架，这样的问题不太会遇到，但是有时候我们想在各个复杂组件分别调用api，而不想对组件进行组件通信数据时候，便会遇到此场景。

1. const promiseCache = new Map()  
2. getWares() {  
3. const key = 'wares'  
4. let promise = promiseCache.get(key);  
5. // 当前promise缓存中没有 该promise  
6. if (!promise) {  
7. promise = request.get('/getWares').then(res => {  
8. // 对res 进行操作  
9. ...  
10. }).catch(error => {  
11. // 在请求回来后，如果出现问题，把promise从cache中删除 以避免第二次请求继续出错S  
12. promiseCache.delete(key)  
13. return Promise.reject(error)  
14. })  
15. }  
16. // 返回promise  
17. return promise  
18. }  

该代码避免了方案一的同一时间多次请求的问题。同时也在后端出错的情况下对promise进行了删除，不会出现缓存了错误的promise就一直出错的问题。

调用方式：

1. getWares().then( ... )  
2. // 第二次调用 取得先前的promise  
3. getWares().then( ... )  

方案三 多promise 缓存

该方案是同时需要 一个以上 的api请求的情况下，对数据同时返回，如果某一个api发生错误的情况下。均不返回正确数据。

1. const querys ={  
2. wares: 'getWares',  
3. skus: 'getSku'  
4. }  
5. const promiseCache = new Map()  
6. async queryAll(queryApiName) {  
7. // 判断传入的数据是否是数组  
8. const queryIsArray = Array.isArray(queryApiName)  
9. // 统一化处理数据，无论是字符串还是数组均视为数组  
10. const apis = queryIsArray ? queryApiName : [queryApiName]  
11. // 获取所有的 请求服务  
12. const promiseApi = []  
13. apis.forEach(api => {  
14. // 利用promise  
15. let promise = promiseCache.get(api)  
16. if (promise) {  
17. // 如果 缓存中有，直接push  
18. promise.push(promise)  
19. } else {  
20. promise = request.get(querys[api]).then(res => {  
21. // 对res 进行操作  
22. ...  
23. }).catch(error => {  
24. // 在请求回来后，如果出现问题，把promise从cache中删除  
25. promiseCache.delete(api)  
26. return Promise.reject(error)  
27. })  
28. promiseCache.set(api, promise)  
29. promiseCache.push(promise)  
30. }  
31. })  
32. return Promise.all(promiseApi).then(res => {  
33. // 根据传入的 是字符串还是数组来返回数据，因为本身都是数组操作  
34. // 如果传入的是字符串，则需要取出操作  
35. return queryIsArray ? res : res[0]  
36. })  
37. }  

该方案是同时获取多个服务器数据的方式。可以同时获得多个数据进行操作，不会因为单个数据出现问题而发生错误。

调用方式：

1. queryAll('wares').then( ... )  
2. // 第二次调用 不会去取 wares，只会去skus  
3. queryAll(['wares', 'skus']).then( ... )  

方案四 添加时间有关的缓存

往往缓存是有危害的，如果我们在知道修改了数据的情况下，直接把 cache 删除即可，此时我们调用方法就可以向服务器进行请求。这样我们规避了前端显示旧的的数据。但是我们可能一段时间没有对数据进行操作，那么此时旧的数据就一直存在，那么我们***规定个时间来去除数据。

该方案是采用了 类 持久化数据来做数据缓存，同时添加了过期时长数据以及参数化。

代码如下：首先定义持久化类,该类可以存储 promise 或者 data 。

1. class ItemCache() {  
2. construct(data, timeout) {  
3. this.data = data  
4. // 设定超时时间，设定为多少秒  
5. this.timeout = timeout  
6. // 创建对象时候的时间，大约设定为数据获得的时间  
7. this.cacheTime = (new Date()).getTime  
8. }  
9. }  

然后我们定义该数据缓存。我们采用Map 基本相同的api 。

1. class ExpriesCache {  
2. // 定义静态数据map来作为缓存池  
3. static cacheMap = new Map()  
4. // 数据是否超时  
5. static isOverTime(name) {  
6. const data = ExpriesCache.cacheMap.get(name)  
7. // 没有数据 一定超时  
8. if (!data) return true  
9. // 获取系统当前时间戳  
10. const currentTime = (new Date()).getTime()  
11. // 获取当前时间与存储时间的过去的秒数  
12. const overTime = (currentTime - data.cacheTime) / 1000  
13. // 如果过去的秒数大于当前的超时时间，也返回null让其去服务端取数据  
14. if (Math.abs(overTime) > data.timeout) {  
15. // 此代码可以没有，不会出现问题，但是如果有此代码，再次进入该方法就可以减少判断。  
16. ExpriesCache.cacheMap.delete(name)  
17. return true  
18. }  
19. // 不超时  
20. return false  
21. }  
22. // 当前data在 cache 中是否超时  
23. static has(name) {  
24. return !ExpriesCache.isOverTime(name)  
25. }  
26. // 删除 cache 中的 data  
27. static delete(name) {  
28. return ExpriesCache.cacheMap.delete(name)  
29. }  
30. // 获取  
31. static get(name) {  
32. const isDataOverTiem = ExpriesCache.isOverTime(name)  
33. //如果 数据超时，返回null，但是没有超时，返回数据，而不是 ItemCache 对象  
34. return isDataOverTiem ? null : ExpriesCache.cacheMap.get(name).data  
35. }  
36. // 默认存储20分钟  
37. static set(name, data, timeout = 1200) {  
38. // 设置 itemCache  
39. const itemCache = mew ItemCache(data, timeout)  
40. //缓存  
41. ExpriesCache.cacheMap.set(name, itemCache)  
42. }  
43. }  

此时数据类以及操作类 都已经定义好,我们可以在api层这样定义 。

1. // 生成key值错误  
2. const generateKeyError = new Error("Can't generate key from name and argument")  
3. // 生成key值  
4. function generateKey(name, argument) {  
5. // 从arguments 中取得数据然后变为数组  
6. const params = Array.from(argument).join(',')  
7. try{  
8. // 返回 字符串，函数名 + 函数参数  
9. return `${name}:${params}`  
10. }catch(_) {  
11. // 返回生成key错误  
12. return generateKeyError  
13. }  
14. }  
15. async getWare(params1, params2) {  
16. // 生成key  
17. const key = generateKey('getWare', [params1, params2])  
18. // 获得数据  
19. let data = ExpriesCache.get(key)  
20. if (!data) {  
21. const res = await request('/getWares', {params1, params2})  
22. // 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求  
23. ExpriesCache.set(key, res, 10)  
24. }  
25. return data  
26. }  

该方案使用了 过期时间 和 api 参数不同而进行 缓存的方式。已经可以满足绝大部分的业务场景。

调用方式：

1. getWares(1,2).then( ... )  
2. // 第二次调用 取得先前的promise  
3. getWares(1,2).then( ... )  
4. // 不同的参数，不取先前promise  
5. getWares(1,3).then( ... )  

方案五 基于修饰器的方案四

和方案四是的解法一致的，但是是基于修饰器来做。代码如下：

1. // 生成key值错误  
2. const generateKeyError = new Error("Can't generate key from name and argument")  
3. // 生成key值  
4. function generateKey(name, argument) {  
5. // 从arguments 中取得数据然后变为数组  
6. const params = Array.from(argument).join(',')  
7. try{  
8. // 返回 字符串  
9. return `${name}:${params}`  
10. }catch(_) {  
11. return generateKeyError  
12. }  
13. }  
14. function decorate(handleDescription, entryArgs) {  
15. // 判断 当前 ***数据是否是descriptor，如果是descriptor,直接 使用  
16. // 例如 log 这样的修饰器  
17. if (isDescriptor(entryArgs[entryArgs.length - 1])) {  
18. return handleDescription(...entryArgs, [])  
19. } else {  
20. // 如果不是  
21. // 例如 add(1) plus(20) 这样的修饰器  
22. return function() {  
23. return handleDescription(...Array.protptype.slice.call(arguments), entryArgs)  
24. }  
25. }  
26. }  
27. function handleApiCache(target, name, descriptor, ...config) {  
28. // 拿到函数体并保存  
29. const fn = descriptor.value  
30. // 修改函数体  
31. descriptor.value = function () {  
32. const key = generateKey(name, arguments)  
33. // key无法生成，直接请求 服务端数据  
34. if (key === generateKeyError) {  
35. // 利用刚才保存的函数体进行请求  
36. return fn.apply(null, arguments)  
37. }  
38. let promise = ExpriesCache.get(key)  
39. if (!promise) {  
40. // 设定promise  
41. promise = fn.apply(null, arguments).catch(error => {  
42. // 在请求回来后，如果出现问题，把promise从cache中删除  
43. ExpriesCache.delete(key)  
44. // 返回错误  
45. return Promise.reject(error)  
46. })  
47. // 使用 10s 缓存，10s之后再次get就会 获取null 而从服务端继续请求  
48. ExpriesCache.set(key, promise, config[0])  
49. }  
50. return promise  
51. }  
52. return descriptor;  
53. }  
54. // 制定 修饰器  
55. function ApiCache(...args) {  
56. return decorate(handleApiCache, args)  
57. }  

此时 我们就会使用 类来对api进行缓存。

1. class Api {  
2. // 缓存10s  
3. @ApiCache(10)  
4. // 此时不要使用默认值，因为当前 修饰器 取不到  
5. getWare(params1, params2) {  
6. return request.get('/getWares')  
7. }  
8. }  

因为函数存在函数提升，所以没有办法利用函数来做 修饰器。

例如：

1. var counter = 0;  
2. var add = function () {  
3. counter++;  
4. };  
5. @add  
6. function foo() {  
7. }  

该代码意图是执行后counter等于 1，但是实际上结果是counter等于 0。因为函数提升，使得实际执行的代码是下面这样：

1. @add  
2. function foo() {  
3. }  
4. var counter;  
5. var add;  
6. counter = 0;  
7. add = function () {  
8. counter++;  
9. };  

所以没有 办法在函数上用修饰器。具体参考ECMAScript 6 入门 Decorator。

此方式写法简单且对业务层没有太多影响。但是不可以动态修改 缓存时间。

调用方式：

1. getWares(1,2).then( ... )  
2. // 第二次调用 取得先前的promise  
3. getWares(1,2).then( ... )  
4. // 不同的参数，不取先前promise  
5. getWares(1,3).then( ... )  

总结