vue接口数据缓存，防止频繁访问接口
import axios from 'axios';
import storage from './storage';
import cryptoHelper from './cryptoHelper';
const root = process.env.API_ROOT;
if (process.env.NODE_ENV === "development") {
axios.defaults.baseURL = root
}else {
axios.defaults.baseURL = root
}
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
const CANCELTTYPE = {
CACHE: 1,
REPEAT: 2,
};
const pendingRequests = [];
const http = axios.create();
http.interceptors.request.use((config) => {
/**
* 为每一次请求生成一个cancleToken
*/
const source = axios.CancelToken.source();
config.cancelToken = source.token;
/**
* 缓存命中判断
* 成功则取消当次请求
*/
//处理FormData生成详细key存储数据
let objData = {};
for (let entry of config.data.entries()){
objData[entry[0]] = entry[1];
}
//尝试获取缓存数据
const data = storage.get(cryptoHelper.encrypt(
config.url + JSON.stringify(objData) + (config.method || '')
));
if (data && (Date.now() <= data.exppries)) {
console.log(`接口：${config.url} 参数：${JSON.stringify(objData)}缓存命中 -- ${Date.now()} -- ${data.exppries}`);
source.cancel(JSON.stringify({
type: CANCELTTYPE.CACHE,
data: data.data,
}));
}
return config;
});
http.interceptors.response.use((res) => {
if (res.data) {
const dataParse = res.data;
//添加缓存时间
if (!dataParse.cacheTime) {
dataParse.cacheTime = 1000 * 60 * 5;
}
//处理FormData生成详细key存储数据
let objData = {};
for (let entry of res.config.data.entries()){
objData[entry[0]] = entry[1];
}
//设置缓存数据
storage.set(cryptoHelper.encrypt(res.config.url + JSON.stringify(objData) + (res.config.method || '')), {
data: res.data,
exppries: Date.now() + dataParse.cacheTime,
});
console.log(`接口：${res.config.url} 参数：${JSON.stringify(objData)} 设置缓存，缓存时间: ${dataParse.cacheTime}`);
return res.data;
} else if(res.data == ''){
return res.data;
}else {
return Promise.reject('接口报错了！');
}
});
/**
* 封装 get、post 请求
* 集成接口缓存过期机制
* 缓存过期将重新请求获取最新数据，并更新缓存
* 数据存储在localstorage
* {
* cache: true
* cacheTime: 1000 * 60 * 3 -- 默认缓存3分钟
* }
*/
const httpHelper = {
get(url, params) {
return new Promise((resolve, reject) => {
http.get(url, params).then(async (res) => {
resolve(res);
}).catch(error => {
if (axios.isCancel(error)) {
const cancle = JSON.parse(error.message);
if (cancle.type === CANCELTTYPE.REPEAT) {
return resolve([]);
} else {
return resolve(cancle.data);
}
} else {
return reject(error);
}
});
});
},
post(url, params) {
return new Promise((resolve, reject) => {
http.post(url, params).then(async (res) => {
resolve(res);
}).catch(error => {
if (axios.isCancel(error)) {
const cancle = JSON.parse(error.message);
if (cancle.type === CANCELTTYPE.REPEAT) {
return resolve(null);
} else {
return resolve(cancle.data);
}
} else {
return reject(error);
}
});
});
},
};
export default httpHelper;