axios添加缓存请求，防止多次请求，单页面多个同一组件造成多次请求解决方案

在axios中，添加

const cacheMap = {};

响应拦截添加

try {
  // 删除缓存
   const api = res.config.url.replace(process.env.VUE_APP_BASE_API, "");
   if (cacheMap.hasOwnProperty(api)) {
     delete cacheMap[api];
   }
 } catch (err) {
 }

创建两个请求方法

/**
 * Get缓存请求
 */
export const cacheGet = async (api, params) => {
  if (!cacheMap.hasOwnProperty(api)) {
    cacheMap[api] = service({
      url: api,
      method: 'get',
      params
    });
  }
  return cacheMap[api];
}

/**
 * Post缓存请求
 */
export const cachePost = async (api, data) => {
  if (cacheMap.hasOwnProperty(api)) {
    cacheMap[api] = service({
      url: api,
      method: 'post',
      data
    });
  }
  return cacheMap[api];
}

然后配合Vuex进行数据缓存