feat: axios 改造
This commit is contained in:
hongxinzz
parent
89844e441d
commit
5807db1dc1
|
|
@ -1,18 +1,10 @@
|
|||
const config: {
|
||||
base_url: {
|
||||
base: string
|
||||
dev: string
|
||||
pro: string
|
||||
test: string
|
||||
}
|
||||
result_code: number | string
|
||||
default_headers: AxiosHeaders
|
||||
request_timeout: number
|
||||
} = {
|
||||
import { AxiosConfig, AxiosResponse } from './type'
|
||||
|
||||
const config: AxiosConfig = {
|
||||
/**
|
||||
* api请求基础路径
|
||||
*/
|
||||
base_url: {
|
||||
baseUrl: {
|
||||
// 开发环境接口前缀
|
||||
base: '',
|
||||
|
||||
|
|
@ -29,18 +21,28 @@ const config: {
|
|||
/**
|
||||
* 接口成功返回状态码
|
||||
*/
|
||||
result_code: '0000',
|
||||
code: '0000',
|
||||
|
||||
/**
|
||||
* 接口请求超时时间
|
||||
*/
|
||||
request_timeout: 60000,
|
||||
timeout: 60000,
|
||||
|
||||
/**
|
||||
* 默认接口请求类型
|
||||
* 可选值：application/x-www-form-urlencoded multipart/form-data
|
||||
*/
|
||||
default_headers: 'application/json'
|
||||
defaultHeaders: 'application/json',
|
||||
|
||||
interceptors: {
|
||||
requestInterceptors: (config) => {
|
||||
return config
|
||||
},
|
||||
// 响应拦截器
|
||||
responseInterceptors: (result: AxiosResponse) => {
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { config }
|
||||
export default config
|
||||
|
|
|
|||
|
|
@ -1,33 +1,37 @@
|
|||
import { service } from './service'
|
||||
// import { service } from './service'
|
||||
|
||||
import { config } from './config'
|
||||
// import { RequestConfig } from "./config"
|
||||
|
||||
const { default_headers } = config
|
||||
// import { config } from './config'
|
||||
|
||||
const request = (option: any) => {
|
||||
const { url, method, params, data, headersType, responseType } = option
|
||||
return service({
|
||||
url: url,
|
||||
method,
|
||||
params,
|
||||
data,
|
||||
responseType: responseType,
|
||||
headers: {
|
||||
'Content-Type': headersType || default_headers
|
||||
}
|
||||
})
|
||||
}
|
||||
export default {
|
||||
get: <T = any>(option: any) => {
|
||||
return request({ method: 'get', ...option }) as unknown as T
|
||||
},
|
||||
post: <T = any>(option: any) => {
|
||||
return request({ method: 'post', ...option }) as unknown as T
|
||||
},
|
||||
delete: <T = any>(option: any) => {
|
||||
return request({ method: 'delete', ...option }) as unknown as T
|
||||
},
|
||||
put: <T = any>(option: any) => {
|
||||
return request({ method: 'put', ...option }) as unknown as T
|
||||
}
|
||||
}
|
||||
// const { default_headers } = config
|
||||
|
||||
// const request = (option: any) => {
|
||||
// const { url, method, params, data, headersType, responseType } = option
|
||||
// return service({
|
||||
// url: url,
|
||||
// method,
|
||||
// params,
|
||||
// data,
|
||||
// responseType: responseType,
|
||||
// headers: {
|
||||
// 'Content-Type': headersType || default_headers
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// export default {
|
||||
// get: <T = any>(option: any) => {
|
||||
// return request({ method: 'get', ...option }) as unknown as T
|
||||
// },
|
||||
// post: <T = any>(option: any) => {
|
||||
// return request({ method: 'post', ...option }) as unknown as T
|
||||
// },
|
||||
// delete: <T = any>(option: any) => {
|
||||
// return request({ method: 'delete', ...option }) as unknown as T
|
||||
// },
|
||||
// put: <T = any>(option: any) => {
|
||||
// return request({ method: 'put', ...option }) as unknown as T
|
||||
// }
|
||||
// }
|
||||
|
||||
export {}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,118 @@
|
|||
import axios, {
|
||||
AxiosInstance,
|
||||
InternalAxiosRequestConfig,
|
||||
AxiosRequestHeaders,
|
||||
AxiosResponse,
|
||||
AxiosError
|
||||
} from 'axios'
|
||||
// import qs from 'qs'
|
||||
|
||||
import qs from 'qs'
|
||||
import axios from 'axios'
|
||||
import config from './config'
|
||||
import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type'
|
||||
|
||||
import { config } from './config'
|
||||
// import { ElMessage } from 'element-plus'
|
||||
|
||||
import { ElMessage } from 'element-plus'
|
||||
// const { result_code, base_url } = config
|
||||
|
||||
const { result_code, base_url } = config
|
||||
// export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
|
||||
|
||||
export const PATH_URL = base_url[import.meta.env.VITE_API_BASEPATH]
|
||||
// // 创建axios实例
|
||||
// const service: AxiosInstance = axios.create({
|
||||
// baseURL: PATH_URL, // api 的 base_url
|
||||
// timeout: config.request_timeout // 请求超时时间
|
||||
// })
|
||||
|
||||
// 创建axios实例
|
||||
const service: AxiosInstance = axios.create({
|
||||
baseURL: PATH_URL, // api 的 base_url
|
||||
timeout: config.request_timeout // 请求超时时间
|
||||
// // request拦截器
|
||||
// service.interceptors.request.use(
|
||||
// (config: InternalAxiosRequestConfig) => {
|
||||
// if (
|
||||
// config.method === 'post' &&
|
||||
// (config.headers as AxiosRequestHeaders)['Content-Type'] ===
|
||||
// 'application/x-www-form-urlencoded'
|
||||
// ) {
|
||||
// config.data = qs.stringify(config.data)
|
||||
// }
|
||||
// // ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
|
||||
// // get参数编码
|
||||
// if (config.method === 'get' && config.params) {
|
||||
// let url = config.url as string
|
||||
// url += '?'
|
||||
// const keys = Object.keys(config.params)
|
||||
// for (const key of keys) {
|
||||
// if (config.params[key] !== void 0 && config.params[key] !== null) {
|
||||
// url += `${key}=${encodeURIComponent(config.params[key])}&`
|
||||
// }
|
||||
// }
|
||||
// url = url.substring(0, url.length - 1)
|
||||
// config.params = {}
|
||||
// config.url = url
|
||||
// }
|
||||
// return config
|
||||
// },
|
||||
// (error: AxiosError) => {
|
||||
// // Do something with request error
|
||||
// console.log(error) // for debug
|
||||
// Promise.reject(error)
|
||||
// }
|
||||
// )
|
||||
|
||||
// // response 拦截器
|
||||
// service.interceptors.response.use(
|
||||
// (response: AxiosResponse<any>) => {
|
||||
// if (response.config.responseType === 'blob') {
|
||||
// // 如果是文件流，直接过
|
||||
// return response
|
||||
// } else if (response.data.code === result_code) {
|
||||
// return response.data
|
||||
// } else {
|
||||
// ElMessage.error(response.data.message)
|
||||
// }
|
||||
// },
|
||||
// (error: AxiosError) => {
|
||||
// console.log('err' + error) // for debug
|
||||
// ElMessage.error(error.message)
|
||||
// return Promise.reject(error)
|
||||
// }
|
||||
// )
|
||||
|
||||
// export { service }
|
||||
|
||||
const { interceptors } = config
|
||||
const { requestInterceptors, responseInterceptors } = interceptors
|
||||
|
||||
const abortControllerMap: Map<string, AbortController> = new Map()
|
||||
|
||||
const axiosInstance: AxiosInstance = axios.create(config)
|
||||
|
||||
axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
|
||||
const controller = new AbortController()
|
||||
const url = res.url || ''
|
||||
res.signal = controller.signal
|
||||
abortControllerMap.set(url, controller)
|
||||
return res
|
||||
})
|
||||
|
||||
// request拦截器
|
||||
service.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
if (
|
||||
config.method === 'post' &&
|
||||
(config.headers as AxiosRequestHeaders)['Content-Type'] ===
|
||||
'application/x-www-form-urlencoded'
|
||||
) {
|
||||
config.data = qs.stringify(config.data)
|
||||
}
|
||||
// ;(config.headers as AxiosRequestHeaders)['Token'] = 'test test'
|
||||
// get参数编码
|
||||
if (config.method === 'get' && config.params) {
|
||||
let url = config.url as string
|
||||
url += '?'
|
||||
const keys = Object.keys(config.params)
|
||||
for (const key of keys) {
|
||||
if (config.params[key] !== void 0 && config.params[key] !== null) {
|
||||
url += `${key}=${encodeURIComponent(config.params[key])}&`
|
||||
}
|
||||
}
|
||||
url = url.substring(0, url.length - 1)
|
||||
config.params = {}
|
||||
config.url = url
|
||||
}
|
||||
return config
|
||||
axiosInstance.interceptors.request.use(requestInterceptors, responseInterceptors)
|
||||
|
||||
axiosInstance.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
const url = res.config.url || ''
|
||||
abortControllerMap.delete(url)
|
||||
return res.data
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
// Do something with request error
|
||||
console.log(error) // for debug
|
||||
Promise.reject(error)
|
||||
}
|
||||
(err: any) => err
|
||||
)
|
||||
|
||||
// response 拦截器
|
||||
service.interceptors.response.use(
|
||||
(response: AxiosResponse<any>) => {
|
||||
if (response.config.responseType === 'blob') {
|
||||
// 如果是文件流，直接过
|
||||
return response
|
||||
} else if (response.data.code === result_code) {
|
||||
return response.data
|
||||
} else {
|
||||
ElMessage.error(response.data.message)
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log('err' + error) // for debug
|
||||
ElMessage.error(error.message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
// const request = (config: RequestConfig) => {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// if (config.interceptors?.requestInterceptors) {
|
||||
// config = config.interceptors.requestInterceptors(config as any)
|
||||
// }
|
||||
// axiosInstance
|
||||
// .request(config)
|
||||
// .then((res) => {
|
||||
// if (config.interceptors?.responseInterceptors) {
|
||||
// res = config.interceptors.responseInterceptors(res)
|
||||
// }
|
||||
|
||||
export { service }
|
||||
// resolve(res)
|
||||
// })
|
||||
// .catch((err: any) => {
|
||||
// reject(err)
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import type {
|
||||
InternalAxiosRequestConfig,
|
||||
AxiosResponse,
|
||||
AxiosRequestConfig,
|
||||
AxiosInstance
|
||||
} from 'axios'
|
||||
|
||||
interface RequestInterceptors<T> {
|
||||
// 请求拦截
|
||||
requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig
|
||||
requestInterceptorsCatch?: (err: any) => any
|
||||
// 响应拦截
|
||||
responseInterceptors?: (config: T) => T
|
||||
responseInterceptorsCatch?: (err: any) => any
|
||||
}
|
||||
interface AxiosConfig<T = AxiosResponse> {
|
||||
baseUrl: {
|
||||
base: string
|
||||
dev: string
|
||||
pro: string
|
||||
test: string
|
||||
}
|
||||
code: number | string
|
||||
defaultHeaders: AxiosHeaders
|
||||
timeout: number
|
||||
interceptors: RequestInterceptors<T>
|
||||
}
|
||||
|
||||
interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
|
||||
interceptors?: RequestInterceptors<T>
|
||||
}
|
||||
|
||||
export {
|
||||
AxiosResponse,
|
||||
RequestInterceptors,
|
||||
RequestConfig,
|
||||
AxiosConfig,
|
||||
AxiosInstance,
|
||||
InternalAxiosRequestConfig
|
||||
}
|
||||
Loading…
Reference in New Issue