Axios 如何数据缓存防止重复请求

写在前面

这篇文章其实是 05. 如何从零开始封装 Axios 请求 的续集，在上一篇文章中讲了如何从零封装一个 Axios 请求，这次是对请求功能的补充，增加缓存功能，避免相同的请求多次请求服务器。

具体实现

首先创建一个axiosCacheAdapter.js文件：

import axios from 'axios';
 
const cache = new Map();
const EXPIRATION_TIME_MS = 1 * 1000; // 缓存过期时间（例如：1秒）
 
// 轮询检查是否有数据
function checking(callback, validate) {
  setTimeout(() => {
      const res = validate && validate()
      if(res) {
        callback && callback(res)
      } else  {
        checking(callback, validate)
      }
  }, 500);
}
 
function CacheValue(response = null) {
  return {
    timestamp: Date.now(),
    response,
  }
}
 
const cacheAdapterEnhancer = config => {
  const { url, method, params, data } = config;
  const cacheKey = JSON.stringify({ url, method, params, data });
 
  if (cache.has(cacheKey)) {
    let cachedResult = cache.get(cacheKey);
    if (Date.now() - cachedResult.timestamp < EXPIRATION_TIME_MS) {
      return new Promise((resolve) => {
        const validate = () => {
          const cachedResult = cache.get(cacheKey);
          return cachedResult.response;
        }
        const callback = (res) => {
          resolve(res);
        }
        checking(callback, validate)
      });
    } else {
      cache.delete(cacheKey);
    }
  }
 
  cache.set(cacheKey, CacheValue());
 
  return axios.defaults.adapter(config).then((response) => {
    cache.set(cacheKey, CacheValue(response));
    return response;
  });
};
 
export default cacheAdapterEnhancer;

然后在主应用中引入并使用这个适配器：

import axios from 'axios';
import cacheAdapterEnhancer from './axiosCacheAdapter';
 
// 创建axios实例并配置缓存适配器
const instance = axios.create({
  adapter: cacheAdapterEnhancer,
});
 
// 使用自定义的axios实例发送请求
instance.get('/your-api-endpoint', { params: yourParams })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

扩展阅读

• 如何让轮询效率最大化
• javascript中轮询一个接口的方法，setInterval和setTimeout + 递归、requestAnimationFrame
• axios请求失败重连
• Axios 如何实现请求重试？
• Axios 如何取消重复请求？