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

在 vue 开发中，我们偶尔会遇到相同组件多次调用一个请求的问题，即使添加了缓存，但在第一次调用时也会出现这类问题，这种问题的根源往往是由于第一个组件发起的请求没有返回数据，第二个组件没有在缓存中获取到数据而重新发起请求。
解决这种问题我们往往可以分两种：

1. 修改组件，将要请求的数据单独提出来，在父组件中请求，然后通过属性赋值。但这种方式就会造成大量的相同代码，可以使用全局混入来解决相同代码问题，但是这也不够简洁，且不够灵活。
2. 修改请求，添加缓存请求方法，将要发起的请求放到缓存中然后返回，使得相同请求使用同一个请求，等到返回数据后清除缓存。这种方式比较特殊，但能很好的解决问题，也不会产生过多的冗余代码。

具体使用见下方代码：

在axios中，添加

const cacheMap = {};
1

响应拦截添加

try {
  // 删除缓存
   const baseApi = res.config.url.replace(service.defaults.baseURL, "");
   let api;
   if (res.config.method === 'get') {
     api = baseApi + JSON.stringify(res.config.params);
   } else {
     api = baseApi + JSON.stringify(res.config.data);
   }
   if (cacheMap.hasOwnProperty(api)) {
     delete cacheMap[api];
   }
 } catch (err) {
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

创建两个请求方法

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

/**
 * Post缓存请求
 */
export const cachePost = async (api, data) => {
  if (api.indexOf("/") !== 0) {
    api = "/" + api;
  }
  const key = api + JSON.stringify(data);
  if (cacheMap.hasOwnProperty(key)) {
    cacheMap[key] = service({
      url: api,
      method: 'post',
      data
    });
  }
  return cacheMap[key];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35