前端优化：api缓存方案

本文长期更新，如有错误，还望指正！
欢迎关注哦 ~ 更新于 2019年6月20日16:04:15

概述

---

缓存api和返回的数据。避免多次重复请求，浪费时间和服务器资源。

适用条件

1. get类获取数据接口 （restful）
2. 返回数据比较固定

比如 历史数据（不更新），用户定制菜单（很少更新），尤其是对系统类网站优化效果显著。

大体思路

将请求url和返回解雇以键值对形式保存在内存中，key是api名称，value是返回的数据。
再次请求时判断本地是否有缓存，有则不再请求，无则去请求。

功能需求

1. 同一个接口，需要区分参数进行存储
   接口名+参数，使用hash生成唯一字符串

2. 支持异步

3. 支持Promise
   使用axios

4. 考虑并发的情况，并非会造成多次请求
   存储axios返回的Promise对象

5. 支持有效时间且过期清除
   增加创建时间戳

6. 支持手动清除

7. 避免占用过多的空间
   对缓存数量进行限制

使用示例

---

开发后已发布到npm，可以直接import使用，源码和api点这里

安装

npm i -S cache-get

直接使用

import cacheGet from 'cache-get';
cacheGet.get(url, { params: {x} }).then((res) => {
  // 请求成功
}).catch((err) => {
  // 请求失败
})

集成到vue

1. 入口文件引入

import cacheGet from 'cache-get';
Vue.prototype.$cacheHttp = cacheGet ;

2. 组件内使用

this.$cacheHttp.get(url, { params: {x} }).then((res) => {
  // 请求成功
}).catch((err) => {
  // 请求失败
})

---

参考资料

• 前端 api 请求缓存方案