diff --git a/src/config/axios/config.ts b/src/config/axios/config.ts index 69c2fc0..d6c257d 100644 --- a/src/config/axios/config.ts +++ b/src/config/axios/config.ts @@ -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 diff --git a/src/config/axios/index.ts b/src/config/axios/index.ts index ab71a45..7a380e0 100644 --- a/src/config/axios/index.ts +++ b/src/config/axios/index.ts @@ -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: (option: any) => { - return request({ method: 'get', ...option }) as unknown as T - }, - post: (option: any) => { - return request({ method: 'post', ...option }) as unknown as T - }, - delete: (option: any) => { - return request({ method: 'delete', ...option }) as unknown as T - }, - put: (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: (option: any) => { +// return request({ method: 'get', ...option }) as unknown as T +// }, +// post: (option: any) => { +// return request({ method: 'post', ...option }) as unknown as T +// }, +// delete: (option: any) => { +// return request({ method: 'delete', ...option }) as unknown as T +// }, +// put: (option: any) => { +// return request({ method: 'put', ...option }) as unknown as T +// } +// } + +export {} diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts index c8d416c..2aa57f5 100644 --- a/src/config/axios/service.ts +++ b/src/config/axios/service.ts @@ -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) => { +// 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 = 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) => { - 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) +// }) +// }) +// } diff --git a/src/config/axios/type.ts b/src/config/axios/type.ts new file mode 100644 index 0000000..f3cd190 --- /dev/null +++ b/src/config/axios/type.ts @@ -0,0 +1,40 @@ +import type { + InternalAxiosRequestConfig, + AxiosResponse, + AxiosRequestConfig, + AxiosInstance +} from 'axios' + +interface RequestInterceptors { + // 请求拦截 + requestInterceptors?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig + requestInterceptorsCatch?: (err: any) => any + // 响应拦截 + responseInterceptors?: (config: T) => T + responseInterceptorsCatch?: (err: any) => any +} +interface AxiosConfig { + baseUrl: { + base: string + dev: string + pro: string + test: string + } + code: number | string + defaultHeaders: AxiosHeaders + timeout: number + interceptors: RequestInterceptors +} + +interface RequestConfig extends AxiosRequestConfig { + interceptors?: RequestInterceptors +} + +export { + AxiosResponse, + RequestInterceptors, + RequestConfig, + AxiosConfig, + AxiosInstance, + InternalAxiosRequestConfig +}