访问量太多,接口的数据也被多次多个功能使用,领导开始想着节省带宽的事情了,服务器资源就那么点,也刚好优化一下用户体验,减少等待…
想法如下:
1、每次走到接口请求之前,先检查本地是否有缓存数据,有就调用
2、本地没有就请求接口,并将数据缓存之后返回出去,等下次使用
export function treeStreet(query?: Object) {
let deptTreeStreet = localStorage.getItem('apiTreeStreet');
if (deptTreeStreet) {
return Promise.resolve(JSON.parse(apiTreeStreet));
} else {
return request({
url: '/api/api/treeStreet',
method: 'get',
}).then((res) => {
// 缓存数据
localStorage.setItem('apiTreeStreet', JSON.stringify(res));
// 返回数据
return Promise.resolve(res);
});
}
}
部分带参数的,可以多写几个if
//返回公司-xx树结构 //type 0 全部 1 xxx 2 xxxx
export function treeCompany(query?: Object) {
let apiTreeCompany = localStorage.getItem('apiTreeCompany');
let apiTreeCompanyType1 = localStorage.getItem('apiTreeCompanyType1');
let apiTreeCompanyType2 = localStorage.getItem('apiTreeCompanyType2');
if (query.type == '1' && apiTreeCompanyType1) {
return Promise.resolve(JSON.parse(apiTreeCompanyType1));
} else if (query.type == '2' && apiTreeCompanyType2) {
return Promise.resolve(JSON.parse(apiTreeCompanyType2));
} else if (query.type && apiTreeCompany) {
return Promise.resolve(JSON.parse(apiTreeCompany));
} else {
return request({
url: '/api/api/treeCompany',
method: 'get',
params: query,
}).then((res) => {
// 缓存数据
if (query.type == '1') {
localStorage.setItem('apiTreeCompanyType1', JSON.stringify(res));
} else if (query.type == '2') {
localStorage.setItem('apiTreeCompanyType2', JSON.stringify(res));
} else if (query.type) {
localStorage.setItem('apiTreeCompany', JSON.stringify(res));
}
// 返回数据
return Promise.resolve(res);
});
}
}
每次调用函数都会创建一个新的Promise对象,这可能会导致内存泄漏和性能问题,想想怎么处理一下