1
class AxiosCache {
2
  constructor() {
3
    super();
4
    this.cacheData = new Map();
5
  }
6

7
  get size() {
8
    return this.cacheData.size;
9
  }
10

11
  get(key) {
12
    return this.cacheData.get(key);
13
  }
14

15
  delete(key) {
16
    this.cacheData.delete(key);
17
  }
18

19
  has(key) {
20
    return this.cacheData.has(key);
21
  }
22

23
  set(key, value) {
24
    this.cacheData.set(key, value);
25
  }
26

27
  isEmpty() {
28
    return !!this.cacheData.size;
29
  }
30

31
  clear() {
32
    this.cacheData = new Map();
33
  }
34
}
35
const axiosCache = new AxiosCache();

1
import { AxiosRequestConfig, AxiosResponse } from 'axios';
2
import { get } from 'lodash';
3
import getMark, { transformDataToString } from '../utils/getMark';
4
import { axiosCache, axiosEvent } from '../instances';
5

6
export function handleCancelCacheRequest(config:AxiosRequestConfig) {
7
  const tempConfig = config;
8
  // 是否开启了缓存（复用重复请求状态）
9
  const enabledCancelCache = get(tempConfig, 'enabledCancelCache');
10
  if (enabledCancelCache) {
11
    // 获取标识
12
    const cancelCacheKey = getMark(tempConfig);
13

14
    if (!axiosCache.has(cancelCacheKey)) {
15
      axiosCache.set(cancelCacheKey, {});
16
    }
17

18
    const {
19
      data, // 缓存的数据
20
      isPending, // 请求是否是pending状态
21
      expire, // 时间戳
22
    } = axiosCache.get(cancelCacheKey);
23

24
    if (isPending) {
25
      // 说明找到了请求但是找到的这个缓存的请求还在pending，这时候订阅一个期约待会要用
26
      tempConfig.adapter = () => new Promise((resolve) => {
27
        axiosEvent.once(cancelCacheKey, (res:unknown) => {
28
          const resolveData: AxiosResponse = {
29
            data: res,
30
            headers: tempConfig.headers,
31
            config: {
32
              ...tempConfig,
33
              useCache: true,
34
            },
35
            // @ts-expect-error
36
            request: tempConfig,
37
          };
38
          resolve(resolveData);
39
        });
40
      });
41
    } else if (expire && expire > Date.now()) {
42
      tempConfig.adapter = () => {
43
        const resolveData: AxiosResponse = {
44
          data: transformDataToString(data),
45
          headers: tempConfig.headers,
46
          config: {
47
            ...tempConfig,
48
            useCache: true,
49
          },
50
          // @ts-expect-error
51
          request: tempConfig,
52
        };
53
        return Promise.resolve(resolveData);
54
      };
55
    } else {
56
      axiosCache.set(cancelCacheKey, {
57
        isPending: true,
58
      });
59
    }
60
  }
61

62
  return tempConfig;
63
}

1
import { AxiosResponse } from 'axios';
2
import get from 'lodash/get';
3
import {
4
  prompt,
5
} from '@/utils';
6
import { axiosCache, axiosEvent } from '../instances';
7
import getMark from '../utils/getMark';
8

9
export default function handleResponseInterceptor(response:AxiosResponse) {
10
  const resData = get(response, 'data');
11
  const config = get(response, 'config') || {};
12

13
  const { enabledCancelCache, useCache } = config;
14
  const cancelCacheKey = getMark(config);
15
  if (get(response, 'status') === 204) {
16
    return response;
17
  }
18
  if (resData?.failed === true) {
19
    axiosCache.set(cancelCacheKey, {
20
      ...(axiosCache.get(cancelCacheKey) || {}),
21
      isPending: false,
22
    });
23

24
    if (!response?.config?.noPrompt) {
25
      prompt(resData.message, 'error');
26
    }
27
    throw resData;
28
  }
29

30
  if (enabledCancelCache && !useCache) {
31
    const finalData = resData;
32
    axiosCache.set(config?.cancelCacheKey || cancelCacheKey, {
33
      data: finalData,
34
      isPending: false,
35
      expire: Date.now() + Number(enabledCancelCache) * 500,
36
    });
37
    axiosEvent.emit(cancelCacheKey, finalData);
38
  }
39

40
  return resData;
41
}

1
// 添加切换路由取消pending请求拦截器
2
instance.interceptors.request.use(routeCancelInterceptor); // 4

1
import { axiosCache } from './index';
2

3
class RouteAxios {
4
  constructor() {
5
    this.pendingRequest = new Map();
6
  }
7

8
  get size() {
9
    return this.pendingRequest.size;
10
  }
11

12
  get(key) {
13
    return this.pendingRequest.get(key);
14
  }
15

16
  delete(key) {
17
    this.pendingRequest.delete(key);
18
  }
19

20
  has(key) {
21
    return this.pendingRequest.has(key);
22
  }
23

24
  set(key, value) {
25
    this.pendingRequest.set(key, value);
26
  }
27

28
  isEmpty() {
29
    return !!this.pendingRequest.size;
30
  }
31

32
  clear() {
33
    this.pendingRequest = new Map();
34
  }
35

36
 cancelAllRequest() {
37
    for (const [key, value] of this.pendingRequest) {
38
      if (value?.cancel && typeof value.cancel === 'function') {
39
        value.cancel();
40
        axiosCache.delete(key); // 这里为什么这么做？后续在说
41
      }
42
    }
43
    this.clear();
44
  }
45
}
46
export const axiosRoutesCancel = new RouteAxios();

1
import axios, { AxiosRequestConfig } from 'axios';
2
import get from 'lodash/get';
3
import { axiosRoutesCancel } from '../instances';
4
import getMark from '../utils/getMark';
5

6
export function routeCancelInterceptor(config:AxiosRequestConfig) {
7
  const tempConfig = config;
8
  const enabledCancelRoute = get(tempConfig, 'enabledCancelRoute');
9
  if (enabledCancelRoute) {
10
    const cancelRouteKey = tempConfig?.cancelCacheKey || getMark(config);
11
    const { CancelToken } = axios;
12
    const source = CancelToken.source();
13
    tempConfig.cancelToken = source.token;
14
    axiosRoutesCancel.set(cancelRouteKey, {
15
      cancel: source.cancel,
16
      name: cancelRouteKey,
17
    });
18
  }
19

20
  return tempConfig;
21
}

1
if (enabledCancelRoute) {
2
    axiosRoutesCancel.delete(cancelCacheKey);
3
}

1
const PermissionRoute: React.FC<PermissionRouteProps> =()=> React.ReactDOM

1
useEffect(() => function () {
2
    if (enabledRouteChangedAjaxBlock && axiosRoutesCancel.size) {
3
      axiosRoutesCancel.cancelAllRequest();
4
    }
5
},
6
[location]);

1
import React, { useEffect, useMemo } from 'react';
2
import { Route, RouteProps, useLocation } from 'react-router-dom';
3
import { noaccess as NoAccess, Permission } from '@/index';
4
import useQueryString from '@/hooks/useQueryString';
5
import Skeleton from '@/containers/components/c7n/master/skeleton';
6
import { axiosRoutesCancel } from '@/containers/components/c7n/tools/axios/instances';
7

8
interface PermissionRouteProps extends RouteProps {
9
  service: string[] | ((type: 'project' | 'organization' | 'site') => string[]),
10
  enabledRouteChangedAjaxBlock: boolean,
11
}
12
const isFunction = (something: unknown): something is Function => typeof something === 'function';
13

14
const PermissionRoute: React.FC<PermissionRouteProps> = ({ enabledRouteChangedAjaxBlock = true, service, ...rest }) => {
15
  const { type } = useQueryString();
16
  const location = useLocation();
17
  const codes = useMemo(() => (isFunction(service) ? service(type) : (service || [])), [service, type]);
18
  const route = (
19
    <Route
20
      {...rest}
21
    />
22
  );
23

24
  useEffect(() => function () {
25
    if (enabledRouteChangedAjaxBlock && axiosRoutesCancel.size) {
26
      axiosRoutesCancel.cancelAllRequest();
27
    }
28
  },
29
  [location]);
30

31
  return (codes.length > 0)
32
    ? (
33
      <Permission
34
        service={codes}
35
        noAccessChildren={<NoAccess />}
36
        defaultChildren={<Skeleton />}
37
      >
38
        {route}
39
      </Permission>
40
    )
41
    : (
42
      <Route
43
        {...rest}
44
      />
45
    );
46
};
47
export default PermissionRoute;
48

49

50
// 用法
51
<PermissionRoute
52
    service={['choerodon.code.project.project.overview.ps.default']}
53
    exact
54
    path={`${match.url}agile/project-overview`}
55
    component={ProjectOverview}
56
/>