refactor: refactor axios

src/api/common/index.ts

@@ -1,15 +1,11 @@
-import { useAxios } from '@/hooks/web/useAxios'
-
-const request = useAxios()
+import request from '@/config/axios'
 
 // 获取所有字典
-export const getDictApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/dict/list' })
-  return res && res.data
+export const getDictApi = (): Promise<IResponse> => {
+  return request.get({ url: '/dict/list' })
 }
 
 // 模拟获取某个字典
 export const getDictOneApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/dict/one' })
-  return res && res.data
+  return request.get({ url: '/dict/one' })
 }

src/api/dashboard/analysis/index.ts

@@ -1,4 +1,4 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type {
   AnalysisTotalTypes,
   UserAccessSource,
@@ -6,24 +6,18 @@ import type {
   MonthlySales
 } from './types'
 
-const request = useAxios()
-
-export const getCountApi = async (): Promise<IResponse<AnalysisTotalTypes[]>> => {
-  const res = await request.get({ url: '/analysis/total' })
-  return res && res.data
+export const getCountApi = (): Promise<IResponse<AnalysisTotalTypes[]>> => {
+  return request.get({ url: '/analysis/total' })
 }
 
-export const getUserAccessSourceApi = async (): Promise<IResponse<UserAccessSource[]>> => {
-  const res = await request.get({ url: '/analysis/userAccessSource' })
-  return res && res.data
+export const getUserAccessSourceApi = (): Promise<IResponse<UserAccessSource[]>> => {
+  return request.get({ url: '/analysis/userAccessSource' })
 }
 
-export const getWeeklyUserActivityApi = async (): Promise<IResponse<WeeklyUserActivity[]>> => {
-  const res = await request.get({ url: '/analysis/weeklyUserActivity' })
-  return res && res.data
+export const getWeeklyUserActivityApi = (): Promise<IResponse<WeeklyUserActivity[]>> => {
+  return request.get({ url: '/analysis/weeklyUserActivity' })
 }
 
-export const getMonthlySalesApi = async (): Promise<IResponse<MonthlySales[]>> => {
-  const res = await request.get({ url: '/analysis/monthlySales' })
-  return res && res.data
+export const getMonthlySalesApi = (): Promise<IResponse<MonthlySales[]>> => {
+  return request.get({ url: '/analysis/monthlySales' })
 }

src/api/dashboard/workplace/index.ts

@@ -1,29 +1,22 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { WorkplaceTotal, Project, Dynamic, Team, RadarData } from './types'
 
-const request = useAxios()
-
-export const getCountApi = async (): Promise<IResponse<WorkplaceTotal>> => {
-  const res = await request.get({ url: '/workplace/total' })
-  return res && res.data
+export const getCountApi = (): Promise<IResponse<WorkplaceTotal>> => {
+  return request.get({ url: '/workplace/total' })
 }
 
-export const getProjectApi = async (): Promise<IResponse<Project>> => {
-  const res = await request.get({ url: '/workplace/project' })
-  return res && res.data
+export const getProjectApi = (): Promise<IResponse<Project>> => {
+  return request.get({ url: '/workplace/project' })
 }
 
-export const getDynamicApi = async (): Promise<IResponse<Dynamic[]>> => {
-  const res = await request.get({ url: '/workplace/dynamic' })
-  return res && res.data
+export const getDynamicApi = (): Promise<IResponse<Dynamic[]>> => {
+  return request.get({ url: '/workplace/dynamic' })
 }
 
-export const getTeamApi = async (): Promise<IResponse<Team[]>> => {
-  const res = await request.get({ url: '/workplace/team' })
-  return res && res.data
+export const getTeamApi = (): Promise<IResponse<Team[]>> => {
+  return request.get({ url: '/workplace/team' })
 }
 
-export const getRadarApi = async (): Promise<IResponse<RadarData[]>> => {
-  const res = await request.get({ url: '/workplace/radar' })
-  return res && res.data
+export const getRadarApi = (): Promise<IResponse<RadarData[]>> => {
+  return request.get({ url: '/workplace/radar' })
 }

src/api/login/index.ts

@@ -1,20 +1,16 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { UserType } from './types'
 
 interface RoleParams {
   roleName: string
 }
 
-const request = useAxios()
-
-export const loginApi = async (data: UserType): Promise<IResponse<UserType>> => {
-  const res = await request.post({ url: '/user/login', data })
-  return res && res.data
+export const loginApi = (data: UserType): Promise<IResponse<UserType>> => {
+  return request.post({ url: '/user/login', data })
 }
 
-export const loginOutApi = async (): Promise<IResponse> => {
-  const res = await request.get({ url: '/user/loginOut' })
-  return res && res.data
+export const loginOutApi = (): Promise<IResponse> => {
+  return request.get({ url: '/user/loginOut' })
 }
 
 export const getUserListApi = ({ params }: AxiosConfig) => {
@@ -24,14 +20,12 @@ export const getUserListApi = ({ params }: AxiosConfig) => {
   }>({ url: '/user/list', params })
 }
 
-export const getAdminRoleApi = async (
+export const getAdminRoleApi = (
   params: RoleParams
 ): Promise<IResponse<AppCustomRouteRecordRaw[]>> => {
-  const res = await request.get({ url: '/role/list', params })
-  return res && res.data
+  return request.get({ url: '/role/list', params })
 }
 
-export const getTestRoleApi = async (params: RoleParams): Promise<IResponse<string[]>> => {
-  const res = await request.get({ url: '/role/list', params })
-  return res && res.data
+export const getTestRoleApi = (params: RoleParams): Promise<IResponse<string[]>> => {
+  return request.get({ url: '/role/list', params })
 }

src/api/table/index.ts

@@ -1,24 +1,18 @@
-import { useAxios } from '@/hooks/web/useAxios'
+import request from '@/config/axios'
 import type { TableData } from './types'
 
-const request = useAxios()
-
-export const getTableListApi = async (params: any): Promise<IResponse> => {
-  const res = await request.get({ url: '/example/list', params })
-  return res && res.data
+export const getTableListApi = (params: any): Promise<IResponse> => {
+  return request.get({ url: '/example/list', params })
 }
 
-export const saveTableApi = async (data: Partial<TableData>): Promise<IResponse> => {
-  const res = await request.post({ url: '/example/save', data })
-  return res && res.data
+export const saveTableApi = (data: Partial<TableData>): Promise<IResponse> => {
+  return request.post({ url: '/example/save', data })
 }
 
-export const getTableDetApi = async (id: string): Promise<IResponse<TableData>> => {
-  const res = await request.get({ url: '/example/detail', params: { id } })
-  return res && res.data
+export const getTableDetApi = (id: string): Promise<IResponse<TableData>> => {
+  return request.get({ url: '/example/detail', params: { id } })
 }
 
-export const delTableListApi = async (ids: string[] | number[]): Promise<IResponse> => {
-  const res = await request.post({ url: '/example/delete', data: { ids } })
-  return res && res.data
+export const delTableListApi = (ids: string[] | number[]): Promise<IResponse> => {
+  return request.post({ url: '/example/delete', data: { ids } })
 }

src/config/axios/index.ts

@@ -1,69 +1,33 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
-
-import { ElMessage } from 'element-plus'
-
-import qs from 'qs'
-
-import { config } from '@/config/axios/config'
-
-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: AxiosRequestConfig) => {
-    if (
-      config.method === 'post' &&
-      config!.headers!['Content-Type'] === 'application/x-www-form-urlencoded'
-    ) {
-      config.data = qs.stringify(config.data)
+import { service } from './service'
+
+import { config } from './config'
+
+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
     }
-    // 添加token，可根据实际业务修改
-    // config!.headers!['Authorization'] = 'something'
-    // 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
+  })
+}
+export default {
+  get: <T = any>(option: any) => {
+    return request({ method: 'get', ...option }) as unknown as T
   },
-  (error: AxiosError) => {
-    // Do something with request error
-    console.log(error) // for debug
-    Promise.reject(error)
-  }
-)
-
-// response 拦截器
-service.interceptors.response.use(
-  (response: AxiosResponse<Recordable>) => {
-    if (response.data.code === result_code) {
-      return response
-    } else {
-      ElMessage.error(response.data.message)
-    }
+  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
   },
-  (error: AxiosError) => {
-    console.log('err' + error) // for debug
-    ElMessage.error(error.message)
-    return Promise.reject(error)
+  put: <T = any>(option: any) => {
+    return request({ method: 'put', ...option }) as unknown as T
   }
-)
-
-export { service }
+}

src/config/axios/service.ts

@@ -0,0 +1,70 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'
+
+import qs from 'qs'
+
+import { config } from './config'
+
+import { ElMessage } from 'element-plus'
+
+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: AxiosRequestConfig) => {
+    if (
+      config.method === 'post' &&
+      (config.headers as any)['Content-Type'] === 'application/x-www-form-urlencoded'
+    ) {
+      config.data = qs.stringify(config.data)
+    }
+    // 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 }

src/hooks/web/useAxios.ts

@@ -1,46 +0,0 @@
-import { service } from '@/config/axios'
-
-import { AxiosPromise } from 'axios'
-
-import { config } from '@/config/axios/config'
-
-const { default_headers } = config
-
-const request = (option: AxiosConfig) => {
-  const { url, method, params, data, headersType, responseType } = option
-  return service({
-    url: url,
-    method,
-    params,
-    data,
-    responseType: responseType,
-    headers: {
-      'Content-Type': headersType || default_headers
-    }
-  })
-}
-
-function getFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'get', ...option })
-}
-
-function postFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'post', ...option })
-}
-
-function deleteFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'delete', ...option })
-}
-
-function putFn<T = any>(option: AxiosConfig): AxiosPromise<T> {
-  return request({ method: 'put', ...option })
-}
-
-export const useAxios = () => {
-  return {
-    get: getFn,
-    post: postFn,
-    delete: deleteFn,
-    put: putFn
-  }
-}

src/views/Authorization/Role.vue

@@ -59,12 +59,12 @@ const getTableList = async (params?: Params) => {
       pageSize: 10
     }
   })
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
+  // .catch(() => {})
+  // .finally(() => {
+  //   loading.value = false
+  // })
   if (res) {
-    tableDataList.value = res.data.list
+    tableDataList.value = res.list
   }
 }
 

src/views/Authorization/User.vue

@@ -59,12 +59,12 @@ const getTableList = async (params?: Params) => {
       pageSize: 10
     }
   })
-    .catch(() => {})
-    .finally(() => {
-      loading.value = false
-    })
+  // .catch(() => {})
+  // .finally(() => {
+  //   loading.value = false
+  // })
   if (res) {
-    tableDataList.value = res.data.list
+    tableDataList.value = res.list
   }
 }