怎么在node服务端设置axios请求缓存

原创

mob64ca12d1a59e 2024-10-19 04:16:23 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d1a59e的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何在 Node 服务端设置 Axios 请求缓存

在现代的 web 应用中，性能优化是至关重要的一部分。Axios 是一个非常流行的 HTTP 客户端，能够帮助我们在 Node.js 中发起 HTTP 请求。然而，频繁的请求可能导致性能上的问题，尤其是在频繁请求相同资源的情况下。为了优化这一过程，设置 Axios 请求缓存是一个有效的解决方案。

问题背景

假设我们有一个 Node 服务端，它需要从外部 API 获取数据。在没有缓存的情况下，每次请求都会去请求相同的资源，这会导致不必要的带宽消耗和较长的响应时间。因此，我们需要在 server 中实现缓存机制，以减少对同一资源的重复请求。

解决方案

为了实现请求缓存，我们可以使用 Axios 的拦截器和一个简单的内存缓存。以下是整体的解决方案步骤：

设置 Axios 实例：首先，我们要创建一个 Axios 实例并配置其基础设置。
实现缓存机制：我们通过一个对象来存储缓存。
使用 Axios 拦截器：在发送请求之前，检查是否有缓存；在响应后，将数据存入缓存。

实现步骤

以下是具体的代码实现：

1. 创建 Axios 实例

创建一个独立的 Axios 实例，并设置基础配置。

const axios = require('axios');

const apiClient = axios.create({
  baseURL: ' // 使用实际 API URL
  timeout: 1000, // 设置请求超时时间
});

2. 实现缓存机制

使用一个简单的对象来存储缓存。

const cache = {};

// 设置缓存过期时间，这里设置为 5 分钟
const CACHE_EXPIRY_TIME = 5 * 60 * 1000;

// 生成缓存键
const getCacheKey = (url, params) => `${url}?${new URLSearchParams(params).toString()}`;

3. 使用 Axios 拦截器

在请求和响应时添加拦截器以实现缓存功能。

// 请求拦截器
apiClient.interceptors.request.use(config => {
  const key = getCacheKey(config.url, config.params);
  // 检查缓存
  if (cache[key] && (Date.now() - cache[key].timestamp < CACHE_EXPIRY_TIME)) {
    // 返回缓存的数据
    console.log('Serving from cache:', key);
    return Promise.reject({ data: cache[key].data, fromCache: true });
  }
  return config;
});

// 响应拦截器
apiClient.interceptors.response.use(response => {
  const key = getCacheKey(response.config.url, response.config.params);
  // 存入缓存
  cache[key] = {
    data: response.data,
    timestamp: Date.now(),
  };
  return response;
}, error => {
  // 在这里处理服务器的 cache reject
  if (error.fromCache) {
    return Promise.resolve(error.data);
  }
  return Promise.reject(error);
});

使用示例

现在，我们可以简单地使用该 apiClient 来发起请求，而它将自动处理缓存：

const fetchData = async () => {
  try {
    const response = await apiClient.get('/data', { params: { id: 1 } });
    console.log('Response:', response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 调用获取数据函数
fetchData();

关系图

为了更好地理解这个缓存系统的结构，我们可以使用如下的关系图表示其基本组成部分：

erDiagram
    Request {
        string url
        string params
    }
    Response {
        string data
    }
    Cache {
        string key
        string timestamp
        string data
    }

    Request ||--o| Cache : checks
    Cache ||--o| Response : stores