Skip to content

Commit 5807db1

Browse files
hongxinzzhongxinzz
committed
feat: axios 改造
1 parent 89844e4 commit 5807db1

File tree

4 files changed

+198
-112
lines changed

4 files changed

+198
-112
lines changed

‎src/config/axios/config.ts

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
1-
const config: {
2-
base_url: {
3-
base: string
4-
dev: string
5-
pro: string
6-
test: string
7-
}
8-
result_code: number | string
9-
default_headers: AxiosHeaders
10-
request_timeout: number
11-
} = {
1+
import { AxiosConfig, AxiosResponse } from './type'
2+
3+
const config: AxiosConfig = {
124
/**
135
* api请求基础路径
146
*/
15-
base_url: {
7+
baseUrl: {
168
// 开发环境接口前缀
179
base: '',
1810

@@ -29,18 +21,28 @@ const config: {
2921
/**
3022
* 接口成功返回状态码
3123
*/
32-
result_code: '0000',
24+
code: '0000',
3325

3426
/**
3527
* 接口请求超时时间
3628
*/
37-
request_timeout: 60000,
29+
timeout: 60000,
3830

3931
/**
4032
* 默认接口请求类型
4133
* 可选值：application/x-www-form-urlencoded multipart/form-data
4234
*/
43-
default_headers: 'application/json'
35+
defaultHeaders: 'application/json',
36+
37+
interceptors: {
38+
requestInterceptors: (config) => {
39+
return config
40+
},
41+
// 响应拦截器
42+
responseInterceptors: (result: AxiosResponse) => {
43+
return result
44+
}
45+
}
4446
}
4547

46-
export { config }
48+
export default config

‎src/config/axios/index.ts

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,37 @@
1-
import { service } from './service'
1+
// import { service } from './service'
22

3-
import { config } from './config'
3+
// import { RequestConfig } from "./config"
44

5-
const { default_headers } = config
5+
// import { config } from './config'
66

7-
const request = (option: any) => {
8-
const { url, method, params, data, headersType, responseType } = option
9-
return service({
10-
url: url,
11-
method,
12-
params,
13-
data,
14-
responseType: responseType,
15-
headers: {
16-
'Content-Type': headersType || default_headers
17-
}
18-
})
19-
}
20-
export default {
21-
get: <T = any>(option: any) => {
22-
return request({ method: 'get', ...option }) as unknown as T
23-
},
24-
post: <T = any>(option: any) => {
25-
return request({ method: 'post', ...option }) as unknown as T
26-
},
27-
delete: <T = any>(option: any) => {
28-
return request({ method: 'delete', ...option }) as unknown as T
29-
},
30-
put: <T = any>(option: any) => {
31-
return request({ method: 'put', ...option }) as unknown as T
32-
}
33-
}
7+
// const { default_headers } = config
8+
9+
// const request = (option: any) => {
10+
// const { url, method, params, data, headersType, responseType } = option
11+
// return service({
12+
// url: url,
13+
// method,
14+
// params,
15+
// data,
16+
// responseType: responseType,
17+
// headers: {
18+
// 'Content-Type': headersType || default_headers
19+
// }
20+
// })
21+
// }
22+
// export default {
23+
// get: <T = any>(option: any) => {
24+
// return request({ method: 'get', ...option }) as unknown as T
25+
// },
26+
// post: <T = any>(option: any) => {
27+
// return request({ method: 'post', ...option }) as unknown as T
28+
// },
29+
// delete: <T = any>(option: any) => {
30+
// return request({ method: 'delete', ...option }) as unknown as T
31+
// },
32+
// put: <T = any>(option: any) => {
33+
// return request({ method: 'put', ...option }) as unknown as T
34+
// }
35+
// }
36+
37+
export {}

‎src/config/axios/service.ts

Lines changed: 106 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,118 @@
1-
import axios, {
2-
AxiosInstance,
3-
InternalAxiosRequestConfig,
4-
AxiosRequestHeaders,
5-
AxiosResponse,
6-
AxiosError
7-
} from 'axios'
1+
// import qs from 'qs'
82

9-
import qs from 'qs'
3+
import axios from 'axios'
4+
import config from './config'
5+
import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type'
106

11-
import { config } from './config'
7+
// import { ElMessage } from 'element-plus'
128

13-
import { ElMessage } from 'element-plus'
9+
// const { result_code, base_url } = config
1410

15-
const { result_code, base_url } = config
11+
// export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
1612

17-
export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
13+
// // 创建axios实例
14+
// const service: AxiosInstance = axios.create({
15+
// baseURL: PATH_URL, // api 的 base_url
16+
// timeout: config.request_timeout // 请求超时时间
17+
// })
1818

19-
// 创建axios实例
20-
const service: AxiosInstance = axios.create({
21-
baseURL: PATH_URL, // api 的 base_url
22-
timeout: config.request_timeout // 请求超时时间
19+
// // request拦截器
20+
// service.interceptors.request.use(
21+
// (config: InternalAxiosRequestConfig) => {
22+
// if (
23+
// config.method === 'post' &&
24+
// (config.headers as AxiosRequestHeaders)['Content-Type'] ===
25+
// 'application/x-www-form-urlencoded'
26+
// ) {
27+
// config.data = qs.stringify(config.data)
28+
// }
29+
// // ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
30+
// // get参数编码
31+
// if (config.method === 'get' && config.params) {
32+
// let url = config.url as string
33+
// url += '?'
34+
// const keys = Object.keys(config.params)
35+
// for (const key of keys) {
36+
// if (config.params[key] !== void 0 && config.params[key] !== null) {
37+
// url += `${key}=${encodeURIComponent(config.params[key])}&`
38+
// }
39+
// }
40+
// url = url.substring(0, url.length - 1)
41+
// config.params = {}
42+
// config.url = url
43+
// }
44+
// return config
45+
// },
46+
// (error: AxiosError) => {
47+
// // Do something with request error
48+
// console.log(error) // for debug
49+
// Promise.reject(error)
50+
// }
51+
// )
52+
53+
// // response 拦截器
54+
// service.interceptors.response.use(
55+
// (response: AxiosResponse<any>) => {
56+
// if (response.config.responseType === 'blob') {
57+
// // 如果是文件流，直接过
58+
// return response
59+
// } else if (response.data.code === result_code) {
60+
// return response.data
61+
// } else {
62+
// ElMessage.error(response.data.message)
63+
// }
64+
// },
65+
// (error: AxiosError) => {
66+
// console.log('err' + error) // for debug
67+
// ElMessage.error(error.message)
68+
// return Promise.reject(error)
69+
// }
70+
// )
71+
72+
// export { service }
73+
74+
const { interceptors } = config
75+
const { requestInterceptors, responseInterceptors } = interceptors
76+
77+
const abortControllerMap: Map<string, AbortController> = new Map()
78+
79+
const axiosInstance: AxiosInstance = axios.create(config)
80+
81+
axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
82+
const controller = new AbortController()
83+
const url = res.url || ''
84+
res.signal = controller.signal
85+
abortControllerMap.set(url, controller)
86+
return res
2387
})
2488

25-
// request拦截器
26-
service.interceptors.request.use(
27-
(config: InternalAxiosRequestConfig) => {
28-
if (
29-
config.method === 'post' &&
30-
(config.headers as AxiosRequestHeaders)['Content-Type'] ===
31-
'application/x-www-form-urlencoded'
32-
) {
33-
config.data = qs.stringify(config.data)
34-
}
35-
// ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
36-
// get参数编码
37-
if (config.method === 'get' && config.params) {
38-
let url = config.url as string
39-
url += '?'
40-
const keys = Object.keys(config.params)
41-
for (const key of keys) {
42-
if (config.params[key] !== void 0 && config.params[key] !== null) {
43-
url += `${key}=${encodeURIComponent(config.params[key])}&`
44-
}
45-
}
46-
url = url.substring(0, url.length - 1)
47-
config.params = {}
48-
config.url = url
49-
}
50-
return config
51-
},
52-
(error: AxiosError) => {
53-
// Do something with request error
54-
console.log(error) // for debug
55-
Promise.reject(error)
56-
}
57-
)
89+
axiosInstance.interceptors.request.use(requestInterceptors, responseInterceptors)
5890

59-
// response 拦截器
60-
service.interceptors.response.use(
61-
(response: AxiosResponse<any>) => {
62-
if (response.config.responseType === 'blob') {
63-
// 如果是文件流，直接过
64-
return response
65-
} else if (response.data.code === result_code) {
66-
return response.data
67-
} else {
68-
ElMessage.error(response.data.message)
69-
}
91+
axiosInstance.interceptors.response.use(
92+
(res: AxiosResponse) => {
93+
const url = res.config.url || ''
94+
abortControllerMap.delete(url)
95+
return res.data
7096
},
71-
(error: AxiosError) => {
72-
console.log('err' + error) // for debug
73-
ElMessage.error(error.message)
74-
return Promise.reject(error)
75-
}
97+
(err: any) => err
7698
)
7799

78-
export { service }
100+
// const request = (config: RequestConfig) => {
101+
// return new Promise((resolve, reject) => {
102+
// if (config.interceptors?.requestInterceptors) {
103+
// config = config.interceptors.requestInterceptors(config as any)
104+
// }
105+
// axiosInstance
106+
// .request(config)
107+
// .then((res) => {
108+
// if (config.interceptors?.responseInterceptors) {
109+
// res = config.interceptors.responseInterceptors(res)
110+
// }
111+
112+
// resolve(res)
113+
// })
114+
// .catch((err: any) => {
115+
// reject(err)
116+
// })
117+
// })
118+
// }

‎src/config/axios/type.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type {
2+
InternalAxiosRequestConfig,
3+
AxiosResponse,
4+
AxiosRequestConfig,
5+
AxiosInstance
6+
} from 'axios'
7+
8+
interface RequestInterceptors<T> {
9+
// 请求拦截
10+
requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
11+
requestInterceptorsCatch?: (err: any) => any
12+
// 响应拦截
13+
responseInterceptors?: (config: T) => T
14+
responseInterceptorsCatch?: (err: any) => any
15+
}
16+
interface AxiosConfig<T = AxiosResponse> {
17+
baseUrl: {
18+
base: string
19+
dev: string
20+
pro: string
21+
test: string
22+
}
23+
code: number | string
24+
defaultHeaders: AxiosHeaders
25+
timeout: number
26+
interceptors: RequestInterceptors<T>
27+
}
28+
29+
interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
30+
interceptors?: RequestInterceptors<T>
31+
}
32+
33+
export {
34+
AxiosResponse,
35+
RequestInterceptors,
36+
RequestConfig,
37+
AxiosConfig,
38+
AxiosInstance,
39+
InternalAxiosRequestConfig
40+
}

0 commit comments

Comments
 (0)