axios请求缓存

目的

避免重复请求，提升运行效率，适用于获取对实时性要求不高的数据。

实现思路

具体实现

import { getKey } from './createKey'
import axios from 'axios'

const cache = new Map()
const pendingRequests = new Map()

//缓存请求数据 使用请求锁 防止并发 减少重复请求，复用已有的结果，提升响应速度
export const cacheRequestData = function (config, cacheTime = 60000) {
  const key = getKey(config)
  if (!key) {
    // 无效 key，直接请求，不缓存
    return axios(config).then((res) => res.data)
  }

  const cached = cache.get(key)
  if (cached && cached.expireTime > Date.now()) {
    return Promise.resolve(cached.data)
  }

  if (pendingRequests.has(key)) {
    return pendingRequests.get(key)
  }

  const requestPromise = axios(config)
    .then((res) => {
      const expireTime = Date.now() + cacheTime
      cache.set(key, { expireTime, data: res.data })
      return res.data
    })
    .finally(() => {
      pendingRequests.delete(key)
    })

  pendingRequests.set(key, requestPromise)
  return requestPromise
}