在 javascript 中，缓存网络请求结果可以通过客户端的内存缓存实现。1) 使用 map 作为缓存容器，检查缓存是否存在，若存在则返回缓存数据。2) 为缓存项设置过期时间，过期则重新请求并更新缓存。3) 设置最大缓存大小，超过时删除最旧缓存项。4) 处理，使用 promise.race 确保同一 url 的请求不会重复发起。

  

  在 JavaScript 中，缓存网络请求结果是一种常见的优化手段，它可以显著提升应用的性能和用户体验。通过缓存，我们可以减少不必要的网络请求，节省带宽，并提高页面的加载速度。

  当我们谈到 JavaScript 中的缓存时，通常会想到几种不同的策略，比如使用的本地存储（如 localStorage 或 sessionStorage）、服务端缓存（如 HTTP 缓存头），以及客户端的内存缓存。每个策略都有其优缺点，选择哪种策略取决于具体的应用场景和需求。

  举个例子，我曾在一个电商项目中使用了本地存储来缓存商品列表，这样当用户在短时间内多次访问商品列表时，不需要每次都发起网络请求，而是直接从本地获取数据，极大地提升了用户体验。然而，这个方法也有一些限制，比如存储容量有限，而且对于频繁更新的数据可能不太适用。

  让我们深入探讨一下如何在 JavaScript 中实现网络请求结果的缓存，着重于客户端的内存缓存，因为这种方法比较灵活，且适合大多数场景。

  首先，我们需要一个缓存机制。假设我们有一个函数 fetchWithCache，它会先检查缓存，如果缓存中有结果，就直接返回缓存数据；如果没有，则发起网络请求，并将结果存入缓存中。下面是一个简单的实现：

  

const cache = new Map();
async function fetchWithCache(url, options = {}) {
if (cache.has(url)) {
    console.log('Fetching from cache:', url);
    return cache.get(url);
}
console.log('Fetching from network:', url);
const response = await fetch(url, options);
const data = await response.json();
cache.set(url, data);
return data;
}

  登录后复制

  这个实现使用了 Map 作为缓存容器，非常简单直接。然而，在实际应用中，我们可能需要考虑更多的细节，比如缓存的有效期、缓存的大小限制等。

  关于缓存的有效期，我们可以为每个缓存项设置一个过期时间，当请求时先检查是否过期，如果过期则重新请求并更新缓存：

  

const cache = new Map();
async function fetchWithCache(url, options = {}) {
const cached = cache.get(url);
if (cached && Date.now() - cached.timestamp < 300000) { // 5分钟内有效
    console.log('Fetching from cache:', url);
    return cached.data;
}
console.log('Fetching from network:', url);
const response = await fetch(url, options);
const data = await response.json();
cache.set(url, { data, timestamp: Date.now() });
return data;
}

  登录后复制

  在这个版本中，我们为每个缓存项添加了一个时间戳，用于判断缓存是否过期。需要注意的是，过期时间的设置需要根据具体的应用场景来决定，太短可能导致频繁的网络请求，太长则可能导致数据不新鲜。

  缓存大小也是一个需要考虑的问题，如果缓存无限增长，可能会导致内存泄漏。我们可以设置一个最大缓存大小，当超过这个大小时，删除最旧的缓存项：

  

const cache = new Map();
const MAX_CACHE_SIZE = 100;
async function fetchWithCache(url, options = {}) {
if (cache.size >= MAX_CACHE_SIZE) {
    const oldestKey = cache.keys().next().value;
    cache.delete(oldestKey);
}
const cached = cache.get(url);
if (cached && Date.now() - cached.timestamp < 300000) {
    console.log('Fetching from cache:', url);
    return cached.data;
}
console.log('Fetching from network:', url);
const response = await fetch(url, options);
const data = await response.json();
cache.set(url, { data, timestamp: Date.now() });
return data;
}