1. Inspirationsquelle
Mehr als einmal in dieser Woche war die Auswahloption aufgrund der langen Anforderungszeit der regionalen Schnittstelle leer, und dafür wurde ein neuer Plan formuliert.
Original: Regionsanfragen, um alle Regionsinformationen zu erhalten, wie z. B. das Erhalten eines Regionsbaums mit allen Informationen einer Provinz, Stadt und eines Distrikts auf einmal.
Jetzt: Die Region fordert an, Sub-Array-Informationen gemäß der übergeordneten ID zu erhalten, wie z. B. das Übergeben der Provinz-ID, um alle Stadtdaten in der Provinz zu erhalten
Nach dem Wechsel zu einer neuen Lösung stellte ich fest, dass ich jedes Mal, wenn ich einige Seiten betrete, 3 oder 4 regionale Schnittstellen laden muss, und sie werden wiederholt geladen. Die Häufigkeit der Aktualisierung regionaler Daten ist jedoch sehr gering, also dachte ich das wenn ich den Datencache verwende, um die Schnittstelle zu ersetzen. Ist es in Ordnung, eine Anfrage zu stellen?
2. Programmpraxis
1. Flussdiagramm
2. Detaillierter Code
// 封装到hooks中
// 封装的请求
import {
http } from '../serve/qzf-http';
// 缓存
const villagesMap = new Map();
// 最大缓存时间
const maxVillagesTime = 1000 * 60 * 10;
// 分片请求地域加上缓存
export const initCacheVillages = (townId) => {
return new Promise((resolve, reject) => {
if (villagesMap.has('time') && Date.now() - villagesMap.get('time') > maxVillagesTime) {
villagesMap.clear();
}
if (villagesMap.has(townId)) {
// 命中
resolve(villagesMap.get(townId));
} else {
// 未命中
http
.get(`xxxx?regionId=${
townId}`)
.then((v) => {
const villages = v.data.payload;
villagesMap.set(townId, villages);
villagesMap.set('time', Date.now());
resolve(villages);
})
.catch((err) => {
reject(err);
});
}
});
};
3. Zusammenfassung
Nach dem Beitritt zum Cache wird dieselbe Anfrage nicht wiederholt, bis der Cache abläuft.
Die Optimierung der Front-End-Leistung umfasst viele Aspekte, von denen einer darin besteht, http/https-Anforderungen zu reduzieren, und die Front-End-Cache-Schnittstellendaten, was in Szenarien, in denen die Häufigkeit der Datenänderung gering ist, äußerst effektiv ist.