前端开发中性能优化之较少http请求（缓存策略）

1.实现减少http请求逻辑如下

定义了一个fetchData函数，用于发起HTTP请求并返回响应结果。函数的实现逻辑如下：
将请求参数对象params转换为字符串，作为缓存对象的键cacheKey。
如果缓存对象中已经有该请求参数对应的结果，直接返回缓存中的结果，不需要再次发起HTTP请求。
如果缓存对象中没有该请求参数对应的结果，使用axios.post方法发起HTTP请求，并在请求完成后将响应结果中的数据保存到缓存对象中，以请求参数为键。
返回获取到的数据，作为fetchData函数的返回值。
在这个实现中，使用一个简单的缓存策略，避免了在请求相同参数时重复发起HTTP请求，从而提高了性能

// 引入axios库
import axios from 'axios';// 创建一个空的缓存对象，用于保存请求结果
let cache = {};// 创建一个函数，用于发起HTTP请求并返回响应结果
function fetchData(params) {// 将请求参数对象转换为字符串，作为缓存对象的键const cacheKey = JSON.stringify(params);// 如果缓存中已经有该请求参数对应的结果，直接返回缓存中的结果if (cache[cacheKey]) {return Promise.resolve(cache[cacheKey]);}// 如果缓存中没有该请求参数对应的结果，发起HTTP请求获取数据return axios.post('http://example.com/api', params).then(response => {// 从响应结果中获取数据const data = response.data;// 将获取到的数据保存到缓存对象中，以请求参数为键cache[cacheKey] = data;// 返回获取到的数据return data;});
}

2.设置最大缓存数和缓存过期时间

通过上面的方法我们可以把现有请求到的数据存到缓存中去，但是这种方法，当数据量很大或者时间长了可能会导致页面性能问题，所以之后我们可以考虑设置最大缓存数，和缓存过期时间

// 创建一个空的缓存对象
let cache = {};// 设置最大缓存数为1000个
const maxCacheSize = 1000;// 设置缓存的过期时间为60秒，单位为毫秒
const cacheTTL = 60 * 1000;/*** 发送HTTP请求并缓存结果* @param {Object} params 请求参数* @returns {Promise} Promise对象，用于异步获取HTTP请求结果*/
function fetchData(params) {// 生成请求参数的字符串形式作为缓存键const cacheKey = JSON.stringify(params);// 查找缓存对象中是否有该键对应的缓存数据const cachedData = cache[cacheKey];// 如果有对应的缓存数据并且未过期，则返回缓存数据if (cachedData && Date.now() - cachedData.timestamp < cacheTTL) {return Promise.resolve(cachedData.data);}// 如果没有对应的缓存数据或者缓存数据已过期，则发起HTTP请求return axios.post('http://example.com/api', params).then(response => {const data = response.data;// 将新的请求结果缓存起来，记录当前时间作为缓存数据的时间戳cache[cacheKey] = {data,timestamp: Date.now()};// 判断缓存数量是否超过最大限制，若超过则删除最早未使用的缓存数据const cacheKeys = Object.keys(cache);if (cacheKeys.length > maxCacheSize) {const oldestCacheKey = cacheKeys.reduce((a, b) => cache[a].timestamp < cache[b].timestamp ? a : b);delete cache[oldestCacheKey];}return data;}).catch(error => {return Promise.reject(error);});
}

在这段代码中，我们首先定义了一个全局变量cache来存储缓存数据，同时设定了缓存的最大数量和过期时间。在fetchData函数中，我们先通过JSON.stringify方法将请求参数转换为一个字符串，作为缓存数据的键（即cacheKey）。然后，我们检查该键对应的缓存数据是否存在，以及是否过期。如果存在且未过期，我们直接返回缓存数据；否则，我们发送HTTP请求并将结果存入缓存中，同时记录该缓存数据的创建时间戳。在存储缓存数据时，我们还会检查缓存数量是否超过最大限制，若超过则删除最早未使用的缓存数据。最后，我们通过Promise.resolve和Promise.reject方法分别返回异步请求结果或错误信息。

总的来说，这段代码实现了类似于node-cache的缓存管理功能，通过限制缓存数量和过期时间来提高性能并避免内存溢出问题。同时，我们还可以根据具体需求来调整缓存数量和过期时间的参数，以实现更好的缓存效果。

3.通过node-cache库实现上述逻辑

使用node-cache可以通过其提供的API来管理缓存数据，具体包括添加缓存、获取缓存、删除缓存等操作。
在使用node-cache进行缓存时，可以设置缓存的过期时间和最大缓存数，从而防止缓存数据过多导致影响性能。具体实现方式如下：

const NodeCache = require('node-cache');
const cache = new NodeCache({stdTTL: 60, // 设置缓存的默认过期时间为60秒maxKeys: 1000 // 设置缓存的最大数量为1000个
});function fetchData(params) {const cacheKey = JSON.stringify(params);const cachedData = cache.get(cacheKey);if (cachedData) {return Promise.resolve(cachedData);}return axios.post('http://example.com/api', params).then(response => {const data = response.data;cache.set(cacheKey, data); // 将数据添加到缓存中return data;}).catch(error => {return Promise.reject(error);});
}

在上述代码中，我们使用node-cache库创建了一个缓存对象，并设置了默认的过期时间和最大缓存数。在每次请求数据时，我们先从缓存中获取数据，如果存在则直接返回缓存数据；否则发起请求获取数据，并将获取到的数据添加到缓存中。
当缓存数据达到最大数量限制时，node-cache会自动根据缓存的LRU（Least Recently Used）策略删除最早未使用的缓存数据，从而避免缓存数据过多导致性能问题。此外，我们也可以通过手动删除缓存来管理缓存数据，例如使用cache.del(cacheKey)方法删除指定键值的缓存数据。