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)方法删除指定键值的缓存数据。