如何使Axios Cache Interceptor对POST请求启用缓存？

Axios Cache Interceptor默认仅对GET请求启用缓存，要让POST请求也能触发缓存，需要调整两个核心配置：允许缓存POST方法，以及确保缓存键包含请求体（因为POST请求的参数通常在body中，相同URL不同body应对应不同缓存）。

1. 全局配置（推荐） #

在初始化缓存拦截器时，通过methods选项添加POST，并自定义keyGenerator来包含请求体信息：

import axios from 'axios';
import { setupCache } from 'axios-cache-interceptor';

// 创建axios实例
const axiosInstance = axios.create();

// 配置缓存拦截器
const cachedAxios = setupCache(axiosInstance, {
  // 允许缓存GET和POST请求
  methods: ['get', 'post'],
  // 自定义缓存键：方法+URL+请求体，确保相同请求（方法、URL、body一致）命中同一缓存
  keyGenerator: (request) => {
    // 处理不同类型的请求体
    let dataKey = '';
    if (request.data instanceof FormData) {
      // 处理FormData：转换为有序的键值对字符串，避免顺序不同导致缓存键不一致
      const sortedEntries = Array.from(request.data.entries()).sort((a, b) => a[0].localeCompare(b[0]));
      dataKey = JSON.stringify(sortedEntries);
    } else {
      // 普通JSON数据直接序列化
      dataKey = JSON.stringify(request.data);
    }
    return `${request.method.toLowerCase()}-${request.url}-${dataKey}`;
  },
  // 设置缓存有效期（示例：5分钟）
  ttl: 5 * 60 * 1000
});

之后使用cachedAxios.post发起请求，就能自动缓存符合条件的POST请求：

const req1 = await cachedAxios.post('/api-1', body);
const req2 = await cachedAxios.post('/api-1', body); // 命中缓存，req2.cached为true

2. 单个请求单独配置 #

如果不需要全局启用POST缓存，可在单个POST请求中单独开启缓存，并指定包含请求体的缓存键：

// 假设已经初始化了基础的cachedAxios实例
const req = await cachedAxios.post('/api-1', body, {
  cache: {
    // 启用当前请求的缓存
    enabled: true,
    // 自定义缓存键，确保包含请求体
    key: `post-/api-1-${JSON.stringify(body)}`
  }
});

注意事项 #

• 仅对幂等的POST请求使用缓存：即多次执行相同POST请求不会改变服务器状态（比如用于复杂查询的POST，而非提交表单、修改数据的POST），否则会导致数据不一致。
• 若请求体包含无法被JSON.stringify序列化的内容（如Blob），需要自定义序列化逻辑，比如生成哈希值来唯一标识请求体。

内容的提问来源于stack exchange，提问作者Zhijie Weng