feat: axios 改造

src/config/axios/config.ts

@@ -1,18 +1,10 @@
-const config: {
+import { AxiosConfig, AxiosResponse } from './type'
-  base_url: {
+
-    base: string
+const config: AxiosConfig = {
-    dev: string
-    pro: string
-    test: string
-  }
-  result_code: number | string
-  default_headers: AxiosHeaders
-  request_timeout: number
-} = {
   /**
    * 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

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 { default_headers } = config
-  const { url, method, params, data, headersType, responseType } = option
+
-  return service({
+// const request = (option: any) => {
-    url: url,
+//   const { url, method, params, data, headersType, responseType } = option
-    method,
+//   return service({
-    params,
+//     url: url,
-    data,
+//     method,
-    responseType: responseType,
+//     params,
-    headers: {
+//     data,
-      'Content-Type': headersType || default_headers
+//     responseType: responseType,
-    }
+//     headers: {
-  })
+//       'Content-Type': headersType || default_headers
-}
+//     }
-export default {
+//   })
-  get: <T = any>(option: any) => {
+// }
-    return request({ method: 'get', ...option }) as unknown as T
+// export default {
-  },
+//   get: <T = any>(option: any) => {
-  post: <T = any>(option: any) => {
+//     return request({ method: 'get', ...option }) as unknown as T
-    return request({ method: 'post', ...option }) as unknown as T
+//   },
-  },
+//   post: <T = any>(option: any) => {
-  delete: <T = any>(option: any) => {
+//     return request({ method: 'post', ...option }) as unknown as T
-    return request({ method: 'delete', ...option }) as unknown as T
+//   },
-  },
+//   delete: <T = any>(option: any) => {
-  put: <T = any>(option: any) => {
+//     return request({ method: 'delete', ...option }) as unknown as T
-    return request({ method: 'put', ...option }) as unknown as T
+//   },
-  }
+//   put: <T = any>(option: any) => {
-}
+//     return request({ method: 'put', ...option }) as unknown as T
+//   }
+// }
+
+export {}

src/config/axios/service.ts

@@ -1,78 +1,118 @@
-import axios, {
+// import qs from 'qs'
-  AxiosInstance,
-  InternalAxiosRequestConfig,
-  AxiosRequestHeaders,
-  AxiosResponse,
-  AxiosError
-} from 'axios'
 
-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实例
+// // request拦截器
-const service: AxiosInstance = axios.create({
+// service.interceptors.request.use(
-  baseURL: PATH_URL, // api 的 base_url
+//   (config: InternalAxiosRequestConfig) => {
-  timeout: config.request_timeout // 请求超时时间
+//     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拦截器
+axiosInstance.interceptors.request.use(requestInterceptors, responseInterceptors)
-service.interceptors.request.use(
+
-  (config: InternalAxiosRequestConfig) => {
+axiosInstance.interceptors.response.use(
-    if (
+  (res: AxiosResponse) => {
-      config.method === 'post' &&
+    const url = res.config.url || ''
-      (config.headers as AxiosRequestHeaders)['Content-Type'] ===
+    abortControllerMap.delete(url)
-        'application/x-www-form-urlencoded'
+    return res.data
-    ) {
-      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) => {
+  (err: any) => err
-    // Do something with request error
-    console.log(error) // for debug
-    Promise.reject(error)
-  }
 )
 
-// response 拦截器
+// const request = (config: RequestConfig) => {
-service.interceptors.response.use(
+//   return new Promise((resolve, reject) => {
-  (response: AxiosResponse<any>) => {
+//     if (config.interceptors?.requestInterceptors) {
-    if (response.config.responseType === 'blob') {
+//       config = config.interceptors.requestInterceptors(config as any)
-      // 如果是文件流，直接过
+//     }
-      return response
+//     axiosInstance
-    } else if (response.data.code === result_code) {
+//       .request(config)
-      return response.data
+//       .then((res) => {
-    } else {
+//         if (config.interceptors?.responseInterceptors) {
-      ElMessage.error(response.data.message)
+//           res = config.interceptors.responseInterceptors(res)
-    }
+//         }
-  },
-  (error: AxiosError) => {
-    console.log('err' + error) // for debug
-    ElMessage.error(error.message)
-    return Promise.reject(error)
-  }
-)
 
-export { service }
+//         resolve(res)
+//       })
+//       .catch((err: any) => {
+//         reject(err)
+//       })
+//   })
+// }

src/config/axios/type.ts

@@ -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
+}