axios实现,在一个极短时间内,请求同一个接口,若传参完全一样,则使用浏览器中的缓存中的上次的值。同时,上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能。
在axios中,我们可以利用浏览器的缓存机制(HTTP缓存)来实现这个需求。不过,浏览器的HTTP缓存主要依赖于服务器返回的Cache-Control等响应头信息,并不能完全按照指定时间自动清除。
但如果你想要在客户端实现一个简易版本的缓存适配器,可以使用内存缓存(如Map或对象)存储请求结果,并设置一个过期时间。
我们将适配器抽离出来作为一个单独的模块,并且通过axios实例配置的方式引入。以下是一个将缓存适配器独立封装的例子:
首先创建一个axiosCacheAdapter.js文件:
import axios from 'axios';
const cache = new Map();
const EXPIRATION_TIME_MS = 60 * 1000; // 缓存过期时间(例如:1分钟)
const cacheAdapterEnhancer = config => {
const { url, method, params, data } = config;
const cacheKey = JSON.stringify({ url, method, params, data });
if (cache.has(cacheKey)) {
const cachedResult = cache.get(cacheKey);
if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
return Promise.resolve(cachedResult.data);
} else {
cache.delete(cacheKey);
}
}
return axios.defaults.adapter(config).then((response) => {
const cacheValue = {
timestamp: Date.now(),
data: response.data,
};
cache.set(cacheKey, cacheValue);
return response;
});
};
export default cacheAdapterEnhancer;
然后在主应用中引入并使用这个适配器:
import axios from 'axios';
import cacheAdapterEnhancer from './axiosCacheAdapter';
// 创建axios实例并配置缓存适配器
const instance = axios.create({
adapter: cacheAdapterEnhancer,
});
// 使用自定义的axios实例发送请求
instance.get('/your-api-endpoint', { params: yourParams })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
这样就实现了适配器的解耦和复用,可以根据需要在不同的地方引入并配置给不同的axios实例。
在这种场景下为何使用的是叫适配器,为啥使用这种设计模式?
在这种场景下,我们虽然没有明确提到“适配器”这个词,但实际设计的机制确实体现了一种适配器模式的应用。
适配器模式(Adapter Pattern)是一种结构型设计模式,它允许将一个接口转换为客户希望的另一个接口,从而使原本不兼容的类可以协同工作。
在上述axios缓存适配器的例子中:
- 原始接口:这里的原始接口是axios提供的HTTP请求功能,它会直接与服务器进行交互以获取数据。
- 目标接口:目标接口是我们期望的行为,即当短时间内重复请求相同接口且参数相同时,从本地缓存而不是服务器获取数据。
- 适配器:创建的
cacheAdapterEnhancer
就是一个适配器,它接收axios原有的请求配置,并通过自定义逻辑来决定是否从缓存中返回数据还是发起实际网络请求。这个适配器将axios原始的接口行为适配成了包含缓存功能的新接口。
通过这种方式,我们无需修改axios库本身的代码,而是通过封装一个适配器,在不改变原有接口的基础上,为axios添加了新的缓存处理逻辑,从而实现了新旧系统之间的解耦和复用,这正是适配器模式的核心思想。
标签:缓存,const,适配器,接口,axios,data,上次 From: https://www.cnblogs.com/longmo666/p/17996836