利用LRU策略实现Axios请求缓存
业务场景
前一段时间刚做完一个项目,先说一下业务场景,有别于其他的前端项目,这次的项目是直接调用第三方服务的接口,而我们的服务端只做鉴权和透传,第三方为了灵活,把接口拆的很零散,所以这个项目就像扔给你一堆乐高颗粒让你组装成一个机器人。所以可以大概分析一下这个项目在请求接口时的一些特点,然后针对性的做一些优化:
- 请求接口多,可能你的一个n个条目的列表本来一个接口搞定现在需要n*10个接口才能拿到完整的数据,有些功能模块可能需要请求成千上万次接口;
- 基本都是get请求,只读不写;
- 接口调用重复率高,因为接口很细碎,所以可能有些常用的接口需要重复调用;
- 接口返回的数据实时性要求不高,第三方的数据不是实时更新的,可能一天或者一周才更新一次,但是第三方要求不能以任何的方式落库。
所以综上分析,前端缓存成了一个可行性较高的优化方案。
解决方案
前端的HTTP请求使用的是Axios,因此可以利用Axios的拦截器进行缓存的管理。梳理一下逻辑:
- 创建缓存对象;
- 请求发起之前判断该请求是否命中缓存:
- 是,直接返回缓存内容;
- 否,发起请求,请求成功后将请求结果存入缓存中。
如标题所说,这里的缓存策略我们用的是LRU(Least Recently Used)策略,因为缓存不能无限大,过大的缓存可能会导致浏览器页面性能下降,甚至内存泄漏。LRU会在缓存达到最大承载量后删除最近最少使用的缓存内容,因此不用担心缓存无限增大。那么如何实现LRU缓存策略呢?Github上有现成的轮子,但是为了更深入的学习嘛,我们自己来手动实现一个。
实现LRU
LRU主要有两个功能,存、取。梳理一下逻辑:
- 存入:
- 如果缓存已满,删除最近最少使用的缓存内容,把当前的缓存存进去,放到最常用的位置;
- 否则直接将缓存存入最常用的位置。
- 读取:
- 如果存在这个缓存,返回缓存内容,同时把该缓存放到最常用的位置;
- 如果没有,返回-1。
这里我们可以看到,缓存是有优先级的,我们用什么来标明优先级呢?如果用数组存储可以将不常用的放到数组的头部,将常用的放到尾部。但是鉴于数据的插入效率不高,这里我们使用Map对象来作为容器存储缓存。
代码如下:
class LRUCache {
constructor(capacity) {
if (typeof capacity !== 'number' || capacity < 0) {
throw new TypeError('capacity必须是一个非负数');
}
this.capacity = capacity;
this.cache = new Map();
}
get(key) {
if (!this.cache.has(key)) {
return -1;
}
let tmp = this.cache.get(key);
// 将当前的缓存移动到最常用的位置
this.cache.delete(key);
this.cache.set(key, tmp);
return tmp;
}
set(key, value) {
if (this.cache.has(key)) {
// 如果缓存存在更新缓存位置
this.cache.delete(key);
} else if (this.cache.size >= this.capacity) {
// 如果缓存容量已满,删除最近最少使用的缓存
this.cache.delete(this.cache.keys().next.val);
}
this.cache.set(key, value);
}
}
结合Axios实现请求缓存
理一下大概的逻辑:每次请求根据请求的方法、url、参数生成一串hash,缓存内容为hash->response,后续请求如果请求方法、url、参数一致,即认为命中缓存。
代码如下:
import axios from 'axios';
import md5 from 'md5';
import LRUCache from './LRU.js';
const cache = new LRUCache(100);
const _axios = axios.create();
// 将请求参数排序,防止相同参数生成的hash不同
function sortObject(obj = {}) {
let result = {};
Object.keys(obj)
.sort()
.forEach((key) => {
result[key] = obj[key];
});
}
// 根据request method,url,data/params生成cache的标识
function genHashByConfig(config) {
const target = {
method: config.method,
url: config.url,
params: config.method === 'get' ? sortObject(config.params) : null,
data: config.method === 'post' ? sortObject(config.data) : null,
};
return md5(JSON.stringify(target));
}
_axios.interceptors.response.use(
function(response) {
// 设置缓存
const hashKey = genHashByConfig(response.config);
cache.set(hashKey, response.data);
return response.data;
},
function(error) {
return Promise.reject(error);
}
);
// 将axios请求封装,如果命中缓存就不需要发起http请求,直接返回缓存内容
export default function request({
method,
url,
params = null,
data = null,
...res
}) {
const hashKey = genHashByConfig({ method, url, params, data });
const result = cache.get(hashKey);
if (~result) {
console.log('cache hit');
return Promise.resolve(result);
}
return _axios({ method, url, params, data, ...res });
}
请求的封装:
import request from './axios.js';
export function getApi(params) {
return request({
method: 'get',
url: '/list',
params,
});
}
export function postApi(data) {
return request({
method: 'post',
url: '/list',
data,
});
}
这里需要注意的一点是,我将请求方法,url,参数进行了hash操作,为了防止参数的顺序改变而导致hash结果不一致,我在hash操作之前,给参数做了排序处理,实际开发中,参数的类型也不一定就是object,可以根据自己的需求进行改造。
如上改造后,第一次请求后,相同的请求再次触发就不会发送http请求了,而是直接从缓存中获取,真是多快好省~
利用LRU策略实现Axios请求缓存的更多相关文章
- nuxt 利用lru-cache 做服务器数据请求缓存
// 运行与服务端的js // node.js lru-cache import LRU from 'lru-cache' const lruCache = LRU({ // 缓存队列长度 max: ...
- Spring-cloud (八) Hystrix 请求缓存的使用
前言: 最近忙着微服务项目的开发,脱更了半个月多,今天项目的初版已经完成,所以打算继续我们的微服务学习,由于Hystrix这一块东西好多,只好多拆分几篇文章写,对于一般对性能要求不是很高的项目中,可以 ...
- 【面试题】LRU算法及编码实现LRU策略缓存
概念 LRU(least recently used)就是将最近不被访问的数据给淘汰掉,LRU基于一种假设:认为最近使用过的数据将来被使用的概率也大,最近没有被访问的数据将来被使用的概率比较低. 原理 ...
- SpringCloud实战-Hystrix线程隔离&请求缓存&请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- SpringCloud实战4-Hystrix线程隔离&请求缓存&请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- Android Xutils框架HttpUtil Get请求缓存问题
话说,今天和服务器开发人员小小的逗逼了一下,为啥呢? 话说今天有个"收藏产品"的请求接口,是get request的哦,我客户端写好接口后,点击"收藏按钮",返 ...
- 【安卓中的缓存策略系列】安卓缓存策略之磁盘缓存DiskLruCache
安卓中的缓存包括两种情况即内存缓存与磁盘缓存,其中内存缓存主要是使用LruCache这个类,其中内存缓存我在[安卓中的缓存策略系列]安卓缓存策略之内存缓存LruCache中已经进行过详细讲解,如看官还 ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- axios [æk'si:əʊs] 及 axios 请求配置
特征 比Jquery轻量,但处理请求不多的时候,可以使用 基于Promise语法标准 支持nodejs 自动转换JSON数据 用法 get // Make a request for a user w ...
随机推荐
- java线程和操作系统线程的异同(大图对比)
先看看两者的对比: 可以发现: 1.java中细分了阻塞,将阻塞给分成了三个不同类型的阻塞. 2.java没有区分就绪状态和运行状态.java将这两种状态合并成runnable状态. 3.还有一个容易 ...
- linux文件系统和日志分析
一.Linux文件系统 1.inode与block 1.概述: (1)文件数据包括元信息与实际信息 (2)文件存储在硬盘上,硬盘最小存储单位是"扇区",每个扇区存储512字节 (3 ...
- 并发王者课-铂金8:峡谷幽会-看CyclicBarrier如何跨越重峦叠嶂
欢迎来到<并发王者课>,本文是该系列文章中的第21篇,铂金中的第8篇. 在上一篇文章中,我们介绍了CountDownLatch的用法.在协调多线程的开始和结束时,CountDownLatc ...
- 使用 Docker 秒速搭建多版本 PHP 开发环境
目录 目标 下载 代理设置 配置环境 PHP 7.2.x,占用本地端口 8081 PHP 5.6.x,占用本地端口 8082 端口映射 local.php72.com -> 127.0.0.1: ...
- keycloak~自定义redirect_uri的方法
在使用keycloak集成springboot的过程中,对于需要授权访问的接口,它会跳到keycloak里进行登录,之前有个redirect_uri,登录成功后会跳回本客户端,而这个地址默认没有修改的 ...
- Docker Swarm介绍
1 什么是swarmSwarm是Docker公司推出的docker集群管理平台,它将一群Docker主机变成了一台单一的虚拟Docker主机.Swarm使用标准的Docker API接口,因此,任何支 ...
- 万字长文肝Git--全流程知识点包您满意【建议收藏】
您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文将首先介绍在本地搭建GitLab服务,然后重点介绍Git的常用命令,Git的核心概念以及冲突处理,最后介绍Git与SVN的区别 干货满满,建议 ...
- NoSql非关系型数据库之MongoDB应用(三):MongoDB在项目中的初步应用
业精于勤,荒于嬉:行成于思,毁于随. 我们可以结合相关的IDE做一个简单的增删改查了,实现MongoDB在项目中的初步应用. 前提是安装了MongoDB服务和MongoDB可视化工具,没有安装的可以点 ...
- [心得笔记]spring常用的三种依赖注入方式
一.目前使用最广泛的 @Autowired:自动装配 基于@Autowired的自动装配,默认是根据类型注入,可以用于构造器.接口.方法注入,使用方式如下: @Autowired 构造方法.方法.接口 ...
- python logger 动态设置日志名
代码: import logging logger = logging.getLogger('') logger.setLevel(level=logging.INFO) def setLogName ...