痛点一这方面，频繁请求导致性能下降

在现代 Web 应用中。特别是需要实时更新数据的页面往往会出现同一个接口被多次触发。话说回来，每一次请求都要占用网络资源、服务器计算和前端渲染时间。最终导致页面卡顿或响应慢。

痛点二的观点是。不必要的网络流量浪费

重复请求会消耗带宽，尤其在移动端使用者上更为明显。使用者体验差，运营成本提高。

再看痛点三。并发请求竞争导致数据不一致

当多个组件同时发起相同的请求时如果没有统一处理机制，可能会出现多次不同的返回结果，甚至导致缓存失效。其实，

目的

避免重复请求。提高运行效率，适用于获取对实时性要求不高的数据；减少网络流量与服务器压力。

实现思路概览

• 使用一个全局 Map 作为缓存容器，存储已完成请求的数据及其过期时间。
• 使用另一个 Map 存放正在进行中的 Promise，防止并发时多次发起同一请求。
• 唯一 key 的方式区分不同请求配置，实现精确缓存。
• 设置可配置的缓存时长，以满足不同业务场景需求。话说回来，

主要代码实现

import axios from 'axios';import { getKey } from './createKey';const cache = new Map;不过，// 缓存容器
const pendingRequests = new Map;
// 正在进行中的请求锁
/**
* 缓存 Axios 请求
*
* @param {Object} config - axios 请求配置
* @param {number} - 缓存有效期，默认 60 秒
* @returns {Promise} - 返回响应数据或缓存数据
*/
export const cacheRequestData = function {
const key = getKey;// 无效 key 时直接执行原始请求，不做缓存
if {
return axios.n;}
// 检查是否已有未过期缓存
const cached = cache.get;if ) {
return Promise.resolve;}
// 若已有相同 key 的待处理 Promise，则直接返回该 Promise
if ) {
return pendingRequests.get;}
// 发起新的网络请求，并在完成后写入缓存
const requestPromise = axios
.n(res => {
const expireTime = Date.now + cacheTime;按理说，cache.set;return res.data;})
.finally => {
pendingRequests.delete;// 清理锁
})，// 保存锁，以防止后续并发同一请求
pendingRequests.set;return requestPromise;}，

使用示例

// 假设有一个 API 接口 /api/user/info
const userInfoConfig = {
从method来看。'get',url: '/api/user/info',};async function loadUserInfo {
try {
const userInfo = await cacheRequestData;按理说，// 缓存两分钟
console.log;} catch {
console.error;}
}
loadUserInfo;

进一步调整建议

• 根据业务需要。对关键字段做哈希处理，提高 key 的唯一性与可靠性。
• 结合 Service Worker 或浏览器 Cache API 做离线缓存，提高离线体验。
• 提供手动清理或刷新接口，让开发者能够灵活控制缓存生命周期。
• 考虑使用 LRU 缓存策略防止内存泄漏。

与收获