前端开发中性能优化之较少http请求（缓存策略）_减少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;
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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);
    });
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

在这段代码中，我们首先定义了一个全局变量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);
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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