在 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; }
这个版本在缓存前先检查是否超过了最大大小，如果是，则删除最旧的缓存项。这种方法可以有效地控制缓存的大小，防止内存泄漏。
在实际应用中，还需要考虑一些其他因素，比如如何处理缓存失效的情况、如何处理并发请求等。关于并发请求，可以使用 Promise.race 来确保即使有多个请求发起，也只会有一个请求实际执行，其他请求直接返回同一个结果：
const cache = new Map(); const MAX_CACHE_SIZE = 100; const pendingRequests = new Map(); 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; } if (pendingRequests.has(url)) { return pendingRequests.get(url); } const promise = (async () => { console.log('Fetching from network:', url); const response = await fetch(url, options); const data = await response.json(); cache.set(url, { data, timestamp: Date.now() }); pendingRequests.delete(url); return data; })(); pendingRequests.set(url, promise); return promise; }
这个版本引入了一个 pendingRequests 映射来处理并发请求，确保同一个 URL 的请求不会重复发起。
总的来说，JavaScript 中缓存网络请求结果是一个非常有用的技术，但需要根据具体的应用场景来设计和优化。通过合理使用缓存，我们可以显著提升应用的性能，但也要注意避免一些常见的陷阱，比如缓存过期、内存泄漏等。希望这些示例和讨论能为你提供一些有用的思路和启发。
