例如人员信息这样的组件,根据id获取信息, 可能一下会请求很多次数据, 前端需要处理
userRequest: Array<{ key: string, list: Array<any> }> = [];
timer: null | number = null;
result: Array<{ k: string, v: User }> = [];
getUserByUsername(username: User["username"]) {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
const sedRequest = this.userRequest.map(({ key }) => ({ key, list: [this.getUserByUserName(key)] }));
sedRequest.forEach(({ key, list }) => { list[0].then(res => { this.userRequest.forEach(({ key: username, list }) => { if (key === username) { list.forEach(item => { item(res) }) } }) }) })
}, 1000)
return new Promise((resolve, reject) => {
const index = this.userRequest.findIndex(({ key }) => key === username);
index > -1 ? this.userRequest[index].list.push((k: User) => resolve(k)) : this.userRequest.push({ key: username, list: [(k: User) => resolve(k)] });
})
}
getUserByUserName = MyIndexedDB.getUser(
async (username: User["username"]) => {
const { data } = await getUserByUsername(username);
return data;
},
DBStoreName.User
);
缓存处理
static nameList: Array<string> = [];
static getUser<T>(func: T, storeName: DBStoreName): T {
return async key => {
const db = GlobalStore.getInstance().db;
if (!db) {
return await func(key);
}
const { ...result } =
(await db.transaction(storeName).store.get(key)) || {};
if (result.username === key) {
if (MyIndexedDB.isTimeOut(result.cacheTime)) {
const data = await func(key);
data.cacheTime = Date.now();
await db.transaction(storeName, "readwrite").store.put({ ...data });
delete data.cacheTime;
return data;
} else {
delete result.cacheTime;
return result;
}
} else {
const data = await func(key);
MyIndexedDB.nameList = Array.from(new Set(MyIndexedDB.nameList));
data.cacheTime = Date.now();
const flag = await MyIndexedDB.exit(key);
if (!flag) {
await db.transaction(storeName, "readwrite").store.add({ ...data });
}
MyIndexedDB.nameList.push(key);
delete data.cacheTime;
return data;
}
};
}
static exit(username: string) {
return Promise.resolve(
MyIndexedDB.nameList.some(item => item === username)
);
}