利用LRU策略实现Axios请求缓存

如果存在这个缓存，返回缓存内容，同时把该缓存放到最常用的位置；
1. 如果没有，返回-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请求了，而是直接从缓存中获取，真是多快好省~