feat: axios 改造

src/config/axios/config.ts

@@ -1,4 +1,12 @@
-import { AxiosConfig, AxiosResponse } from './type'
+import {
+  AxiosConfig,
+  AxiosResponse,
+  AxiosRequestHeaders,
+  AxiosError,
+  InternalAxiosRequestConfig
+} from './type'
+import { ElMessage } from 'element-plus'
+import qs from 'qs'
 
 const config: AxiosConfig = {
   /**
@@ -21,7 +29,7 @@ const config: AxiosConfig = {
   /**
    * 接口成功返回状态码
    */
-  code: '0000',
+  code: 0,
 
   /**
    * 接口请求超时时间
@@ -35,14 +43,59 @@ const config: AxiosConfig = {
   defaultHeaders: 'application/json',
 
   interceptors: {
-    requestInterceptors: (config) => {
-      return config
-    },
+    //请求拦截
+    // requestInterceptors: (config) => {
+    //   return config
+    // },
     // 响应拦截器
-    responseInterceptors: (result: AxiosResponse) => {
-      return result
-    }
+    // responseInterceptors: (result: AxiosResponse) => {
+    //   return result
+    // }
   }
 }
 
+const defaultRequestInterceptors = (config: InternalAxiosRequestConfig) => {
+  if (
+    config.method === 'post' &&
+    (config.headers as AxiosRequestHeaders)['Content-Type'] === 'application/x-www-form-urlencoded'
+  ) {
+    config.data = qs.stringify(config.data)
+  }
+  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) => {
+  console.log(error)
+  Promise.reject(error)
+}
+
+const defaultResponseInterceptors = (response: AxiosResponse<any>) => {
+  if (response?.config?.responseType === 'blob') {
+    // 如果是文件流，直接过
+    return response
+  } else if (response.data.code === config.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 { defaultResponseInterceptors, defaultRequestInterceptors }
 export default config

src/config/axios/index.ts

@@ -1,37 +1,40 @@
-// import { service } from './service'
+import service from './service'
 
-// import { RequestConfig } from "./config"
+import config from './config'
 
-// import { config } from './config'
+const { defaultHeaders } = config
 
-// const { default_headers } = config
+const request = (option: any) => {
+  const { url, method, params, data, headersType, responseType } = option
+  return service.request({
+    url: url,
+    method,
+    params,
+    data,
+    responseType: responseType,
+    headers: {
+      'Content-Type': headersType || defaultHeaders
+    }
+  })
+}
 
-// 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 {}
+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
+  },
+  cancelRequest: (url: string | string[]) => {
+    return service.cancelRequest(url)
+  },
+  cancelAllRequest: () => {
+    return service.cancelAllRequest()
+  }
+}

src/config/axios/service.ts

@@ -1,82 +1,19 @@
-// import qs from 'qs'
-
 import axios from 'axios'
-import config from './config'
+import config, { defaultRequestInterceptors, defaultResponseInterceptors } from './config'
+
 import { AxiosInstance, InternalAxiosRequestConfig, RequestConfig, AxiosResponse } from './type'
 
-// import { ElMessage } from 'element-plus'
+const { interceptors, baseUrl } = config
+export const PATH_URL = baseUrl[import.meta.env.VITE_API_BASEPATH]
 
-// const { result_code, base_url } = config
-
-// 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 // 请求超时时间
-// })
-
-// // 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)
+const axiosInstance: AxiosInstance = axios.create({
+  ...config,
+  baseURL: PATH_URL
+})
 
 axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
   const controller = new AbortController()
@@ -86,8 +23,6 @@ axiosInstance.interceptors.request.use((res: InternalAxiosRequestConfig) => {
   return res
 })
 
-axiosInstance.interceptors.request.use(requestInterceptors, responseInterceptors)
-
 axiosInstance.interceptors.response.use(
   (res: AxiosResponse) => {
     const url = res.config.url || ''
@@ -97,22 +32,39 @@ axiosInstance.interceptors.response.use(
   (err: any) => err
 )
 
-// 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)
-//         }
+axiosInstance.interceptors.request.use(requestInterceptors || defaultRequestInterceptors)
+axiosInstance.interceptors.response.use(responseInterceptors || defaultResponseInterceptors)
 
-//         resolve(res)
-//       })
-//       .catch((err: any) => {
-//         reject(err)
-//       })
-//   })
-// }
+const service = {
+  request: (config: RequestConfig) => {
+    return new Promise((resolve, reject) => {
+      if (config.interceptors?.requestInterceptors) {
+        config = config.interceptors.requestInterceptors(config as any)
+      }
+
+      axiosInstance
+        .request(config)
+        .then((res) => {
+          resolve(res)
+        })
+        .catch((err: any) => {
+          reject(err)
+        })
+    })
+  },
+  cancelRequest: (url: string | string[]) => {
+    const urlList = Array.isArray(url) ? url : [url]
+    for (const _url of urlList) {
+      abortControllerMap.get(_url)?.abort()
+      abortControllerMap.delete(_url)
+    }
+  },
+  cancelAllRequest() {
+    for (const [_, controller] of abortControllerMap) {
+      controller.abort()
+    }
+    abortControllerMap.clear()
+  }
+}
+
+export default service

src/config/axios/type.ts

@@ -2,7 +2,9 @@ import type {
   InternalAxiosRequestConfig,
   AxiosResponse,
   AxiosRequestConfig,
-  AxiosInstance
+  AxiosInstance,
+  AxiosRequestHeaders,
+  AxiosError
 } from 'axios'
 
 interface RequestInterceptors<T> {
@@ -20,7 +22,7 @@ interface AxiosConfig<T = AxiosResponse> {
     pro: string
     test: string
   }
-  code: number | string
+  code: number
   defaultHeaders: AxiosHeaders
   timeout: number
   interceptors: RequestInterceptors<T>
@@ -36,5 +38,7 @@ export {
   RequestConfig,
   AxiosConfig,
   AxiosInstance,
-  InternalAxiosRequestConfig
+  InternalAxiosRequestConfig,
+  AxiosRequestHeaders,
+  AxiosError
 }