refactor: refactor useAxios

src/api/dashboard/analysis/index.ts

@@ -6,20 +6,20 @@ import type {
   MonthlySales
 } from './types'
 
-const { request } = useAxios()
+const request = useAxios()
 
 export const getCountApi = () => {
-  return request<AnalysisTotalTypes>({ url: '/analysis/total', method: 'get' })
+  return request.get<AnalysisTotalTypes>({ url: '/analysis/total' })
 }
 
 export const getUserAccessSourceApi = () => {
-  return request<UserAccessSource[]>({ url: '/analysis/userAccessSource', method: 'get' })
+  return request.get<UserAccessSource[]>({ url: '/analysis/userAccessSource' })
 }
 
 export const getWeeklyUserActivityApi = () => {
-  return request<WeeklyUserActivity[]>({ url: '/analysis/weeklyUserActivity', method: 'get' })
+  return request.get<WeeklyUserActivity[]>({ url: '/analysis/weeklyUserActivity' })
 }
 
 export const getMonthlySalesApi = () => {
-  return request<MonthlySales[]>({ url: '/analysis/monthlySales', method: 'get' })
+  return request.get<MonthlySales[]>({ url: '/analysis/monthlySales' })
 }

src/api/dashboard/workplace/index.ts

@@ -1,24 +1,24 @@
 import { useAxios } from '@/hooks/web/useAxios'
 import type { WorkplaceTotal, Project, Dynamic, Team, RadarData } from './types'
 
-const { request } = useAxios()
+const request = useAxios()
 
 export const getCountApi = () => {
-  return request<WorkplaceTotal>({ url: '/workplace/total', method: 'get' })
+  return request.get<WorkplaceTotal>({ url: '/workplace/total' })
 }
 
 export const getProjectApi = () => {
-  return request<Project[]>({ url: '/workplace/project', method: 'get' })
+  return request.get<Project[]>({ url: '/workplace/project' })
 }
 
 export const getDynamicApi = () => {
-  return request<Dynamic[]>({ url: '/workplace/dynamic', method: 'get' })
+  return request.get<Dynamic[]>({ url: '/workplace/dynamic' })
 }
 
 export const getTeamApi = () => {
-  return request<Team[]>({ url: '/workplace/team', method: 'get' })
+  return request.get<Team[]>({ url: '/workplace/team' })
 }
 
 export const getRadarApi = () => {
-  return request<RadarData[]>({ url: '/workplace/radar', method: 'get' })
+  return request.get<RadarData[]>({ url: '/workplace/radar' })
 }

src/api/login/index.ts

@@ -1,34 +1,34 @@
 import { useAxios } from '@/hooks/web/useAxios'
 import type { UserLoginType, UserType } from './types'
 
-const { request } = useAxios()
+const request = useAxios()
 
 export const loginApi = (data: UserLoginType) => {
-  return request({ url: '/user/login', method: 'post', data } as AxiosConfig<
-    Recordable,
-    UserLoginType
-  >)
+  return request.post({
+    url: '/user/login',
+    data
+  })
 }
 
 export const loginOutApi = () => {
-  return request({ url: '/user/loginOut', method: 'get' })
+  return request.get({ url: '/user/loginOut' })
 }
 
 export const getUserListApi = ({ params }: AxiosConfig) => {
-  return request<{
+  return request.get<{
     total: number
     list: UserType[]
-  }>({ url: '/user/list', method: 'get', params })
+  }>({ url: '/user/list', params })
 }
 
-export const getAdminRoleApi = ({ params }: AxiosConfig) => {
-  return request<{
+export const getAdminRoleApi = ({ params }) => {
+  return request.get<{
     list: AppCustomRouteRecordRaw[]
-  }>({ url: '/role/list', method: 'get', params })
+  }>({ url: '/role/list', params })
 }
 
-export const getTestRoleApi = ({ params }: AxiosConfig) => {
-  return request<{
+export const getTestRoleApi = ({ params }) => {
+  return request.get<{
     list: string[]
-  }>({ url: '/role/list', method: 'get', params })
+  }>({ url: '/role/list', params })
 }

src/api/table/index.ts

@@ -1,37 +1,23 @@
 import { useAxios } from '@/hooks/web/useAxios'
 import type { TableData } from './types'
 
-const { request } = useAxios()
+const request = useAxios()
 
-export const getTableListApi = ({ params }: AxiosConfig) => {
-  return request<{
+export const getTableListApi = ({ params }) => {
+  return request.get<{
     total: number
     list: TableData[]
-  }>({ url: '/example/list', method: 'get', params })
+  }>({ url: '/example/list', params })
 }
 
-export const saveTableApi = ({ data }: AxiosConfig<Recordable, TableData>) => {
-  return request({ url: '/example/save', method: 'post', data })
+export const saveTableApi = ({ data }) => {
+  return request.post<TableData>({ url: '/example/save', data })
 }
 
-export const getTableDetApi = ({
-  params
-}: AxiosConfig<
-  {
-    id: string
-  },
-  Recordable
->) => {
-  return request<TableData>({ url: '/example/detail', method: 'get', params })
+export const getTableDetApi = ({ params }) => {
+  return request.get<TableData>({ url: '/example/detail', params })
 }
 
-export const delTableListApi = ({
-  data
-}: AxiosConfig<
-  Recordable,
-  {
-    id: string[] | number[]
-  }
->) => {
-  return request({ url: '/example/delete', method: 'post', data })
+export const delTableListApi = ({ data }) => {
+  return request.post({ url: '/example/delete', data })
 }

src/hooks/web/useAxios.ts

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

types/global.d.ts

@@ -25,9 +25,9 @@ declare type AxiosMethod = 'get' | 'post' | 'delete' | 'put'
 
 declare type AxiosResponseType = 'arraybuffer' | 'blob' | 'document' | 'json' | 'text' | 'stream'
 
-declare type AxiosConfig<T = Recordable, K = Recordable> = {
-  params?: T
-  data?: K
+declare type AxiosConfig = {
+  params?: any
+  data?: any
   url?: string
   method?: AxiosMethod
   headersType?: string