首先创建一个axiosCacheAdapter.js文件：
import axios from 'axios';
const cache = new Map();
const EXPIRATION_TIME_MS = 1 * 1000; // 缓存过期时间（例如：1秒）
// 轮询检查是否有数据
function checking(callback, validate) {
setTimeout(() => {
const res = validate && validate()
if(res) {
callback && callback(res)
} else {
checking(callback, validate)
}
}, 500);
}
function CacheValue(response = null) {
return {
timestamp: Date.now(),
response,
}
}
const cacheAdapterEnhancer = config => {
const { url, method, params, data } = config;
const cacheKey = JSON.stringify({ url, method, params, data });
if (cache.has(cacheKey)) {
let cachedResult = cache.get(cacheKey);
if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
return new Promise((resolve) => {
const validate = () => {
const cachedResult = cache.get(cacheKey);
return cachedResult.response;
}
const callback = (res) => {
resolve(res);
}
checking(callback, validate)
});
} else {
cache.delete(cacheKey);
}
}
cache.set(cacheKey, CacheValue());
return axios.defaults.adapter(config).then((response) => {
cache.set(cacheKey, CacheValue(response));
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);
});