在项目中封装Axios

TIP
转载链接: 在项目中用ts封装axios，一次封装整个团队受益

基础封装#

TIP
我们首先将其封装成一个最基础的Request类，类可以创建多个实例，适用范围更广，封装性更强

1
import axios from 'axios';
2
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
3

4
class Request {
5
  // axios实例
6
  instance: AxiosInstance;
7

8
  constructor(config: AxiosRequestConfig) {
9
    this.instance = axios.create(config);
10
  }
11
  request(config: AxiosRequestConfig) {
12
    return this.instance.request(config);
13
  }
14
}
15

16
export default Request

拦截器的封装#

TIP
这里我们将拦截器分为三种:

类拦截器(全局请求拦截器)

实例拦截器

接口拦截器

1. 类拦截器#

TIP
类拦截器的实现很简单，直接在类中对axios实例调用interceptors下的两个拦截器:
我们在全局响应拦截器(类拦截器)中做了简单处理，将请求结果中的data返回

1
import axios, { AxiosResponse } from 'axios';
2
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
3

4
class Request {
5
  // axios实例
6
  instance: AxiosInstance;
7

8
  constructor(config: AxiosRequestConfig) {
9
    this.instance = axios.create(config);
10
    this.instance.interceptors.request.use(
11
      (res: AxiosRequestConfig) => {
12
        console.log('全局请求拦截器');
13
        return res;
14
      },
15
      (err: any) => {
16
        return err;
17
      }
18
    );
19
    this.instance.interceptors.response.use(
20
      (res: AxiosResponse) => {
21
        // 项目的接口数据都在res.data下,所以我们可以直接返回res.data
22
        console.log('全局响应拦截器');
23
        return res.data;
24
      },
25
      (err: any) => {
26
        return err;
27
      }
28
    );
29
  }
30
  request(config: AxiosRequestConfig) {
31
    return this.instance.request(config);
32
  }
33
}
34

35
export default Request;

2. 实例拦截器#

TIP
实例拦截器的存在是为了保证封装的灵活性，因为每一个实例中拦截后处理的操作可能是不一样的，所以我们应该在定义实例时，允许传入拦截器
首先，定义一下interface，方便后面的类型使用和代码提示:

1
import type { AxiosResponse, AxiosRequestConfig } from 'axios';
2

3
export interface RequestInterceptors<T> {
4
  // 请求拦截
5
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
6
  requestInterceptorsCatch?: (err: any) => any;
7
  // 响应拦截
8
  responseInterceptors?: (config: T) => T;
9
  responseInterceptorsCatch?: (err: any) => any;
10
}
11
// 自定义传入的参数
12
export interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
13
  interceptors?: RequestInterceptors<T>
14
}

TIP
既然要允许实例传入拦截器，我们就要对传入的参数类型做一下改造，因为axio提供的AxiosRequestConfig是不允许传入拦截器的，所以我们在上面/types.ts中自定义了RequestConfig，让其继承AxiosRequestConfig达到目的。
修改入参的类型，添加拦截器对象interceptorsObj,使用实例拦截器:
完成之后，拦截器的执行顺序为：实例请求→类请求→实例响应→类响应

1
import axios, { AxiosResponse } from 'axios';
2
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
3
import type { RequestInterceptors, RequestConfig } from './types/types';
4

5
class Request {
6
  // axios实例
7
  instance: AxiosInstance;
8
  // 拦截器对象
9
  interceptorsObj?: RequestInterceptors<AxiosResponse>;
10

11
  constructor(config: RequestConfig) {
12
    this.instance = axios.create(config);
13
    this.interceptorsObj = config.interceptors;
14
    this.instance.interceptors.request.use(
15
      (res: AxiosRequestConfig) => {
16
        console.log('全局请求拦截器');
17
        return res;
18
      },
19
      (err: any) => {
20
        return err;
21
      }
22
    );
23

24
    // 使用实例拦截器
25
    this.instance.interceptors.request.use(
26
      this.interceptorsObj?.requestInterceptors,
27
      this.interceptorsObj?.requestInterceptorsCatch
28
    )
29
    this.instance.interceptors.response.use(
30
      this.interceptorsObj?.responseInterceptors,
31
      this.interceptorsObj?.responseInterceptorsCatch
32
    )
33
    // 全局响应拦截器保证最后执行
34
    this.instance.interceptors.response.use(
35
      (res: AxiosResponse) => {
36
        // 项目的接口数据都在res.data下,所以我们可以直接返回res.data
37
        console.log('全局响应拦截器');
38
        return res.data;
39
      },
40
      (err: any) => {
41
        return err;
42
      }
43
    );
44
  }
45
  request(config: RequestConfig) {
46
    return this.instance.request(config);
47
  }
48
}
49

50
export default Request;

3. 接口拦截器#

TIP
那么最后，我们对单一接口进行拦截操作,刚才我们将AxiosRequestConfig类型修改为RequestConfig允许传递拦截器;然后我们又在类拦截器中将接口请求的数据进行了返回，也就是说在request()方法中得到的类型就不是AxiosResponse类型了
查看axios的index.d.ts声明文件,对request()方法的类型定义如下:

1
request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;

TIP
也就是说它允许我们传递类型，从而改变request方法的返回值类型 :

1
import axios, { AxiosResponse } from 'axios';
2
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
3
import type { RequestInterceptors, RequestConfig } from './types/types';
4

5
class Request {
6
  // axios实例
7
  instance: AxiosInstance;
8
  // 拦截器对象
9
  interceptorsObj?: RequestInterceptors<AxiosResponse>;
10

11
  constructor(config: RequestConfig) {
12
    this.instance = axios.create(config);
13
    this.interceptorsObj = config.interceptors;
14
    this.instance.interceptors.request.use(
15
      (res: AxiosRequestConfig) => {
16
        console.log('全局请求拦截器');
17
        return res;
18
      },
19
      (err: any) => {
20
        return err;
21
      }
22
    );
23

24
    // 使用实例拦截器
25
    this.instance.interceptors.request.use(
26
      this.interceptorsObj?.requestInterceptors,
27
      this.interceptorsObj?.requestInterceptorsCatch
28
    );
29
    this.instance.interceptors.response.use(
30
      this.interceptorsObj?.responseInterceptors,
31
      this.interceptorsObj?.responseInterceptorsCatch
32
    );
33
    // 全局响应拦截器保证最后执行
34
    this.instance.interceptors.response.use(
35
      (res: AxiosResponse) => {
36
        // 项目的接口数据都在res.data下,所以我们可以直接返回res.data
37
        console.log('全局响应拦截器');
38
        return res.data;
39
      },
40
      (err: any) => {
41
        return err;
42
      }
43
    );
44
  }
45
  request<T>(config: RequestConfig<T>): Promise<T> {
46
    return new Promise((resolve, reject) => {
47
      // 如果为单个请求设置拦截器，这里使用单个请求的拦截器
48
      if (config.interceptors?.requestInterceptors) {
49
        config = config.interceptors.requestInterceptors(config);
50
      }
51
      this.instance.request<any, T>(config)
52
      .then((res) => {
53
        // 如果给单个响应设置了拦截器，这里使用单个响应的拦截器
54
        if (config.interceptors?.responseInterceptors) {
55
          res = config.interceptors.responseInterceptors(res);
56
        }
57
        resolve(res);
58
      })
59
      .catch((err: any) => {
60
        reject(err)
61
      })
62
    });
63
  }
64
}
65

66
export default Request;

取消请求的封装#

TIP
首先定义两个集合,分别用来存放请求url和对应的取消方法:

1
class Request {
2
  // axios实例
3
  instance: AxiosInstance;
4
  // 拦截器对象
5
  interceptorsObj?: RequestInterceptors<AxiosResponse>;
6
  /*
7
  存放取消方法的集合
8
  * 在创建请求后将取消请求方法 push 到该集合中
9
  * 封装一个方法，可以取消请求，传入 url: string|string[]
10
  * 在请求之前判断同一URL是否存在，如果存在就取消请求
11
  */
12
  cancelRequestSourceList?: CancelRequestSource[];
13
  /*
14
  存放所有请求URL的集合
15
  * 请求之前需要将url push到该集合中
16
  * 请求完毕后将url从集合中删除
17
  * 添加在发送请求之前完成，删除在响应之后删除
18
  */
19
  requestUrlList?: string[];
20

21
  constructor(config: RequestConfig) {
22
    //  数据初始化
23
    this.requestUrlList = [];
24
    this.cancelRequestSourceList = []; // 取消请求列表
25
    // ... 省略
26
  }
27
}

CancelRequestSource接口的定义如下：

1
export interface CancelRequestSource {
2
  [index: string]: () => void;
3
}
4
//  这里的key是不固定的，因为我们使用url做key，只有在使用的时候才知道url，所以这里使用这种语法

1. 取消请求方法的添加和删除#

TIP
改造request方法:

在请求之前，将url和取消请求的方法分别添加到前面我们定义的两个集合当中

在请求完毕之后(无论成功还是失败)，将其删除

1
class Request {
2
  // axios实例
3
  instance: AxiosInstance;
4
  // 拦截器对象
5
  interceptorsObj?: RequestInterceptors<AxiosResponse>;
6
  /*
7
  存放取消方法的集合
8
  * 在创建请求后将取消请求方法 push 到该集合中
9
  * 封装一个方法，可以取消请求，传入 url: string|string[]
10
  * 在请求之前判断同一URL是否存在，如果存在就取消请求
11
  */
12
  cancelRequestSourceList?: CancelRequestSource[];
13
  /*
14
  存放所有请求URL的集合
15
  * 请求之前需要将url push到该集合中
16
  * 请求完毕后将url从集合中删除
17
  * 添加在发送请求之前完成，删除在响应之后删除
18
  */
19
  requestUrlList?: string[];
20

21
  constructor(config: RequestConfig) {
22
      //...省略
23
  }
24

25
  request<T>(config: RequestConfig<T>): Promise<T> {
26
    return new Promise((resolve, reject) => {
27
      // 如果为单个请求设置拦截器，这里使用单个请求的拦截器
28
      if (config.interceptors?.requestInterceptors) {
29
        config = config.interceptors.requestInterceptors(config);
30
      }
31
      const url = config.url;
32
      // url存在 保存当前请求url 和 取消请求方法
33
      if (url) {
34
        this.requestUrlList?.push(url);
35
        // TODO 在axios0.22起，对CancelToken已经弃用，需要改成  AbortController 文档：https://axios-http.com/docs/cancellation
36
        config.cancelToken = new axios.CancelToken((c) => {
37
          this.cancelRequestSourceList?.push({
38
            [url]: c
39
          });
40
        });
41
      }
42
        this.instance
43
      .request<any, T>(config)
44
      .then(res => {
45
        // 如果我们为单个响应设置拦截器，这里使用单个响应的拦截器
46
        if (config.interceptors?.responseInterceptors) {
47
          res = config.interceptors.responseInterceptors<T>(res)
48
        }
49

50
        resolve(res)
51
      })
52
      .catch((err: any) => {
53
        reject(err)
54
      })
55
      .finally(() => {
56
        url && this.delUrl(url)
57
      })
58
     // ... 省略
59
  }
60
}

TIP
上面的代码中，我们将删除请求和其对应的取消方法的逻辑抽离出来，封装成一个函数 :

1
/**
2
 * @description: 获取指定 url 在 cancelRequestSourceList 中的索引
3
 * @param {string} url
4
 * @returns {number} 索引位置
5
 */
6
private getSourceIndex(url: string): number {
7
  return this.cancelRequestSourceList?.findIndex(
8
    (item: CancelRequestSource) => {
9
      return Object.keys(item)[0] === url
10
    },
11
  ) as number
12
}
13
/**
14
 * @description: 删除 requestUrlList 和 cancelRequestSourceList
15
 * @param {string} url
16
 * @returns {*}
17
 */
18
private delUrl(url: string) {
19
  const urlIndex = this.requestUrlList?.findIndex(u => u === url)
20
  const sourceIndex = this.getSourceIndex(url)
21
  // 删除url和cancel方法
22
  urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)
23
  sourceIndex !== -1 &&
24
    this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
25
}

2. 取消请求的方法#

取消全部请求:#

1
// 取消全部请求
2
cancelAllRequest() {
3
  this.cancelRequestSourceList?.forEach(source => {
4
    const key = Object.keys(source)[0]
5
    source[key]()
6
  })
7
}

根据传入的值执行不同操作(取消一个或多个请求):#

1
cancelRequest(url: string | string[]) {
2
  if (typeof url === 'string') {
3
    // 取消单个请求
4
    const sourceIndex = this.getSourceIndex(url)
5
    sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()
6
  } else {
7
    // 存在多个需要取消请求的地址
8
    url.forEach(u => {
9
      const sourceIndex = this.getSourceIndex(u)
10
      sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()
11
    })
12
  }
13
}

完整代码示例:#

TIP
最终拦截器的执行顺序将是: 接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应

1
import axios, { AxiosResponse } from 'axios';
2
import qs from 'qs';
3
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
4
import type { RequestInterceptors, CancelRequestSource, RequestConfig } from './types/types';
5

6
class Request {
7
  // axios实例
8
  instance: AxiosInstance;
9
  // 拦截器对象
10
  interceptorsObj?: RequestInterceptors<AxiosResponse>;
11
  /*
12
  存放取消方法的集合
13
  * 在创建请求后将取消请求方法 push 到该集合中
14
  * 封装一个方法，可以取消请求，传入 url: string|string[]
15
  * 在请求之前判断同一URL是否存在，如果存在就取消请求
16
  */
17
  cancelRequestSourceList?: CancelRequestSource[];
18
  /*
19
  存放所有请求URL的集合
20
  * 请求之前需要将url push到该集合中
21
  * 请求完毕后将url从集合中删除
22
  * 添加在发送请求之前完成，删除在响应之后删除
23
  */
24
  requestUrlList?: string[];
25

26
  constructor(config: RequestConfig) {
27
    this.requestUrlList = [];
28
    this.cancelRequestSourceList = []; // 取消请求列表
29
    this.instance = axios.create(config); //  创建axios实例
30
    this.interceptorsObj = config.interceptors;
31
    // 拦截器执行顺序：接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应
32
    this.instance.interceptors.request.use(
33
      (res: AxiosRequestConfig) => {
34
        console.log('res', res);
35
        return res;
36
      },
37
      (err: any) => err
38
    );
39
    // 使用实例拦截器
40
    this.instance.interceptors.request.use(
41
      this.interceptorsObj?.requestInterceptors,
42
      this.interceptorsObj?.requestInterceptorsCatch
43
    );
44
    this.instance.interceptors.response.use(
45
      this.interceptorsObj?.responseInterceptors,
46
      this.interceptorsObj?.responseInterceptorsCatch
47
    );
48
    // 全局响应拦截器保证最后执行
49
    this.instance.interceptors.response.use(
50
      // 接口的数据都在res.data下，所以直接返回res.data
51
      (res: AxiosResponse) => {
52
        return res.data;
53
      },
54
      (err: any) => {
55
        return {
56
          status: 500,
57
          message: err
58
        };
59
      }
60
    );
61
  }
62
  /**
63
   * @description: 获取指定 url 在 cancelRequestSourceList 中的索引
64
   * @param {string} url
65
   * @returns {number} 索引位置
66
   */
67
  private getSourceIndex(url: string): number {
68
    return this.cancelRequestSourceList?.findIndex((item: CancelRequestSource) => {
69
      return Object.keys(item)[0] === url;
70
    }) as number;
71
  }
72
  /**
73
   * @description: 删除 requestUrlList 和 cancelRequestSourceList
74
   * @param {string} url
75
   * @returns {*}
76
   */
77
  private delUrl(url: string) {
78
    const urlIndex = this.requestUrlList?.findIndex((u) => u === url);
79
    const sourceIndex = this.getSourceIndex(url);
80
    // 删除url和cancel方法
81
    urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1);
82
    sourceIndex !== -1 && this.cancelRequestSourceList?.splice(sourceIndex, 1);
83
  }
84
  request<T>(config: RequestConfig<T>): Promise<T> {
85
    return new Promise((resolve, reject) => {
86
      // 如果为单个请求设置拦截器，这里使用单个请求的拦截器
87
      if (config.interceptors?.requestInterceptors) {
88
        config = config.interceptors.requestInterceptors(config);
89
      }
90
      const url = config.url;
91
      // url存在 保存当前请求url 和 取消请求方法
92
      if (url) {
93
        this.requestUrlList?.push(url);
94
        // TODO 在axios0.22起，对CancelToken已经弃用，需要改成  AbortController 文档：https://axios-http.com/docs/cancellation
95
        config.cancelToken = new axios.CancelToken((c) => {
96
          this.cancelRequestSourceList?.push({
97
            [url]: c
98
          });
99
        });
100
      }
101
      this.instance
102
        .request<any, T>(config)
103
        .then((res) => {
104
          // 如果给单个响应设置拦截器,这里使用单个响应的拦截器
105
          if (config.interceptors?.responseInterceptors) {
106
            res = config.interceptors.responseInterceptors(res);
107
          }
108
          resolve(res);
109
        })
110
        .catch((err: any) => {
111
          reject(err);
112
        })
113
        .finally(() => {
114
          url && this.delUrl(url);
115
        });
116
    });
117
  }
118
  // 取消请求
119
  cancelRequest(url: string | string[]) {
120
    if (typeof url === 'string') {
121
      //  取消单个请求
122
      const sourceIndex = this.getSourceIndex(url);
123
      sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]();
124
    } else {
125
      // 存在多个需要取消请求的地址
126
      url.forEach((u) => {
127
        const sourceIndex = this.getSourceIndex(u);
128
        sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]();
129
      });
130
    }
131
  }
132
  // 取消全部请求
133
  cancelAllRequest() {
134
    this.cancelRequestSourceList?.forEach((source) => {
135
      const key = Object.keys(source)[0];
136
      source[key]();
137
    });
138
  }
139
}
140

141
export default Request;
142

143
export { RequestConfig, RequestInterceptors };

interface定义:

1
import type { AxiosRequestConfig, AxiosResponse } from 'axios';
2

3
export interface RequestInterceptors<T> {
4
  // 请求拦截
5
  requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig;
6
  requestInterceptorsCatch?: (err: any) => any;
7
  // 响应拦截
8
  responseInterceptors?: (config: T) => T;
9
  responseInterceptorsCatch?: (err: any) => any;
10
}
11

12
// 自定义传入的参数
13
export interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
14
  interceptors?: RequestInterceptors<T>;
15
}
16
export interface CancelRequestSource {
17
  [index: string]: () => void;
18
}

使用方法示例：#

TIP
具体的封装方法和使用方法需要结合项目需求灵活调整

1
import CONFIG from '@/config/index';
2
import Request from './index';
3
import appStore from '@/store';
4
import { AxiosResponse } from 'axios';
5

6
const http = new Request({
7
  baseURL: CONFIG.serverAddress,
8
  timeout: 1000 * 60 * 5,
9
  interceptors: {
10
    // 请求拦截器
11
    requestInterceptors: (config) => {
12
      config.validateStatus = (status) => {
13
        switch (status) {
14
          case 401:
15
            ElMessage.error('用户信息过期或无权限，请重新登录');
16
            const { saveToken } = appStore.useTokenStore;
17
            const { saveUserInfo } = appStore.useUserInfoStore;
18
            const { setUuid } = appStore.useRefreshStore;
19
            const router = useRouter();
20
            saveToken(''); //  清除token
21
            saveUserInfo(''); //  清除用户信息
22
            setUuid(); //  全局刷新
23
            router.push('/');
24
            break;
25
          default:
26
            break;
27
        }
28
        return status >= 200 && status < 400;
29
      };
30
      return config;
31
    },
32
    // 响应拦截器
33
    responseInterceptors: (result: AxiosResponse) => {
34
      return result
35
    }
36
  }
37
});
38
export default http;