feat(project): 优化axios和请求类型

mock/module/user.ts

@@ -10,7 +10,7 @@ const userInfo = {
 	userName: 'iamsee',
 	realName: '管理员大人',
 	avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg',
-	role: "user",
+	role: "super",
 };
 const userRoutes = [
 	{

src/config/service.ts

@@ -1,5 +1,6 @@
 /** 默认实例的Aixos配置 */
-export const DEFAULT_AXIOS_OPTIONS = {
+import type { AxiosRequestConfig } from 'axios';
+export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = {
 	// 请求超时时间,默认15秒
 	timeout: 15 * 1000,
 };

src/constants/business.ts

@@ -0,0 +1,5 @@
+/** 用户性别 */
+export const genderLabels: Record<NonNullable<CommonList.GenderType>, string> = {
+  0: '女',
+  1: '男'
+};

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './business'

src/enum/common.ts

@@ -1,5 +0,0 @@
-export enum EnumContentType {
-	json = 'application/json',
-	formUrlencoded = 'application/x-www-form-urlencoded',
-	formData = 'multipart/form-data',
-}

src/enum/index.ts

@@ -1 +0,0 @@
-export * from './common';

src/service/api/login.ts

@@ -4,15 +4,12 @@ interface Ilogin {
 	userName: string;
 	password: string;
 }
-interface Itoken {
+
-	token: string;
-	refreshToken: string;
-}
 export function fetchLogin(params: Ilogin) {
 	return mockRequest.post<any>('/login', params);
 }
 export function fetchUpdateToken(params: any) {
-	return mockRequest.post<Itoken>('/updateToken', params);
+	return mockRequest.post<ApiAuth.loginToken>('/updateToken', params);
 }
 export function fetchUserInfo() {
 	return mockRequest.get<Auth.UserInfo>('/getUserInfo');

src/service/api/test.ts

@@ -1,28 +1,25 @@
 import { request } from '../http';
 import { mockRequest } from '../http';
 
-interface Itest {
-	data: string;
-}
 /* get方法测试 */
-export function fetachGet() {
+export function fetachGet(params?:any) {
-	return request.get('/getAPI');
+	return request.get('/getAPI', { params });
 }
 /* post方法测试 */
-export function fetachPost(params: Itest) {
+export function fetachPost(data: any) {
-	return request.post('/postAPI', params);
+	return request.post('/postAPI', data);
+}
+/* formPost方法测试 */
+export function fetachFormPost(data: any) {
+	return request.formPost('/postAPI', data);
 }
 /* delete方法测试 */
 export function fetachDelete() {
 	return request.delete('/deleteAPI');
 }
 /* put方法测试 */
-export function fetachPut(params: Itest) {
+export function fetachPut(data: any) {
-	return request.put('/putAPI', params);
+	return request.put('/putAPI', data);
-}
-/* patch方法测试 */
-export function fetachPatch(params: Itest) {
-	return request.patch('/patchAPI', params);
 }
 
 /* 测试状态码500失败 */

src/service/http/instance.ts

@@ -9,7 +9,7 @@ import {
 	handleServiceResult,
 	handleRefreshToken,
 } from './handle';
-import { transformRequestData } from './utils';
+import { transformRequestData, clearInvalidParameters } from './utils';
 
 import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS } from '@/config';
 
@@ -36,16 +36,15 @@ export default class createAxiosInstance {
 			async (config) => {
 				const handleConfig = { ...config };
 				if (handleConfig.headers) {
+					// 清除无效字段
+					handleConfig.data = clearInvalidParameters(handleConfig.data)
 					// 数据格式转换
-					// handleConfig.headers.setContentType('application/json');
+					const contentType = handleConfig.headers.getContentType() as unknown as UnionKey.ContentType
-					// const contentType = handleConfig.headers.get('Content-Type');
+					if (contentType) {
-
+						handleConfig.data = await transformRequestData(handleConfig.data, contentType);
-					const contentType = 'application/json';
+					}					
-					handleConfig.data = await transformRequestData(handleConfig.data, contentType);
-
 					// 设置token
-					typeof handleConfig.headers.set === 'function' &&
+					handleConfig.headers.setAuthorization(`Bearer ${local.get('token') || ''}`)
-						handleConfig.headers.set('Authorization', `Bearer ${local.get('token') || ''}`);
 				}
 				return handleConfig;
 			},

src/service/http/request.ts

@@ -9,14 +9,14 @@ interface RequestParam {
 	config?: AxiosRequestConfig;
 }
 
-async function getRequestResponse(params: {
+async function getRequestResponse(options: {
 	instance: AxiosInstance;
 	method: RequestMethod;
 	url: string;
 	data?: any;
 	config?: AxiosRequestConfig;
 }) {
-	const { instance, method, url, data, config } = params;
+	const { instance, method, url, data, config } = options;
 
 	let res: any;
 	if (method === 'get' || method === 'delete') {
@@ -74,12 +74,23 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
 		return asyncRequest<T>({ url, method: 'post', data, config: config });
 	}
 
+	/**
+ * post请求-form参数形式
+ * @param url - 请求地址
+ * @param data - 请求的body的data
+ * @param config - axios配置
+ */
+	function formPost<T>(url: string, data?: any, config: AxiosRequestConfig = {}) {
+		config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' }
+		return asyncRequest<T>({ url, method: 'post', data, config: config });
+	}
+
 	/**
 	 * delete请求
 	 * @param url - 请求地址
 	 * @param config - axios配置
 	 */
-	function handleDelete<T>(url: string, config?: AxiosRequestConfig) {
+	function handleDelete<T>(url: string, params?: any, config?: AxiosRequestConfig) {
 		return asyncRequest<T>({ url, method: 'delete', config: config });
 	}
 
@@ -93,21 +104,11 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
 		return asyncRequest<T>({ url, method: 'put', data, config: config });
 	}
 
-	/**
-	 * patch请求
-	 * @param url - 请求地址
-	 * @param data - 请求的body的data
-	 * @param config - axios配置
-	 */
-	function patch<T>(url: string, data?: any, config?: AxiosRequestConfig) {
-		return asyncRequest<T>({ url, method: 'patch', data, config: config });
-	}
-
 	return {
 		get,
 		post,
-		delete: handleDelete,
+		formPost,
 		put,
-		patch,
+		delete: handleDelete,
 	};
 }

src/service/http/utils.ts

@@ -1,6 +1,5 @@
 import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config';
 import { isArray, isFile, isEmpty, isNullOrUnDef } from '@/utils';
-import { EnumContentType } from '@/enum';
 import qs from 'qs';
 
 export function showError(error: Service.RequestError) {
@@ -16,17 +15,16 @@ export function showError(error: Service.RequestError) {
  * @param requestData - 请求数据
  * @param contentType - 请求头的Content-Type
  */
-export async function transformRequestData(requestData: any, contentType?: string) {
+export async function transformRequestData(requestData: any, contentType?: UnionKey.ContentType) {
-	// application/json类型不处理
+	// application/json类型不处理,清除发送参数的无效字段
 	let data: any = clearInvalidParameters(requestData);
-	// let data = requestData;
 
 	// form类型转换
-	if (contentType === EnumContentType.formUrlencoded) {
+	if (contentType === 'application/x-www-form-urlencoded') {
 		data = qs.stringify(data);
 	}
 	// form-data类型转换
-	if (contentType === EnumContentType.formData) {
+	if (contentType === 'multipart/form-data') {
 		data = await handleFormData(data);
 	}
 
@@ -40,8 +38,9 @@ async function handleFormData(data: Record<string, any>) {
 	entries.forEach(async ([key, value]) => {
 		const isFileType = isFile(value) || (isArray(value) && value.length && isFile(value[0]));
 
-		if (isFileType) {
+		if (isFileType && isArray(value)) {
-			await transformFile(formData, key, value);
+			value.forEach((item) => formData.append(key, item))
+
 		} else {
 			formData.append(key, value);
 		}
@@ -50,31 +49,11 @@ async function handleFormData(data: Record<string, any>) {
 	return formData;
 }
 
-/**
- * 接口为上传文件的类型时数据转换
- * @param key - 文件的属性名
- * @param file - 单文件或多文件
- */
-async function transformFile(formData: FormData, key: string, file: File[] | File) {
-	if (isArray(file)) {
-		// 多文件
-		await Promise.all(
-			(file as File[]).map((item) => {
-				formData.append(key, item);
-				return true;
-			})
-		);
-	} else {
-		// 单文件
-		formData.append(key, file);
-	}
-}
-
 /**
  * 接口提交的参数去除无效字段
  * @param requestData -接口提交的参数
  */
-function clearInvalidParameters(requestData: Record<string, any>) {
+export function clearInvalidParameters(requestData: Record<string, any>) {
 	const result: Record<string, any> = {};
 	for (const key in requestData) {
 		if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key])) continue;

src/store/modules/auth.ts

@@ -52,7 +52,7 @@ export const useAuthStore = defineStore('auth-store', {
 		},
 
 		/* 登录后的处理函数 */
-		async handleAfterLogin(data: Auth.loginToken) {
+		async handleAfterLogin(data: ApiAuth.loginToken) {
 			// 将token和userInfo保存下来
 			const catchSuccess = await this.catchUserInfo(data);
 
@@ -85,7 +85,7 @@ export const useAuthStore = defineStore('auth-store', {
 		},
 
 		/* 缓存用户信息 */
-		async catchUserInfo(userToken: Auth.loginToken) {
+		async catchUserInfo(userToken: ApiAuth.loginToken) {
 			let catchSuccess = false;
 			// 先存储token
 			const { token, refreshToken } = userToken;

src/typings/api.d.ts

@@ -4,4 +4,23 @@
 declare namespace ApiAuth {
   /** 返回的用户信息 */
   type UserInfo = Auth.UserInfo;
+  /* 登录token字段 */
+  interface loginToken {
+    token: string;
+    refreshToken: string;
+  }
+}
+declare namespace CommonList {
+  /* 返回的性别类型 */
+  type GenderType = '0' | '1' | null;
+  interface UserList {
+    id: number;
+    name: string;
+    age: number;
+    gender: GenderType;
+    email: string;
+    address: string;
+    role: Auth.RoleType;
+    disabled: boolean;
+  }
 }

src/typings/business.d.ts

@@ -1,19 +1,7 @@
 /** 用户相关模块 */
 declare namespace Auth {
-	/**
+	/** 用户角色类型 */
-	 * 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
+	type RoleType = 'super' | 'admin' | 'user';
-	 * - super: 超级管理员(该权限具有所有路由数据)
-	 * - admin: 管理员
-	 * - user: 用户
-	 * - custom: 自定义角色
-	 */
-
-	/** 用户信息 */
-	interface loginToken {
-		token: string;
-		refreshToken: string;
-	}
-	type RoleType = 'super' | 'admin' | 'manage' | 'user';
 	interface UserInfo {
 		/** 用户id */
 		userId: number;
@@ -48,15 +36,3 @@ declare namespace Message {
 	}
 }
 
-declare namespace CommonList {
-	interface UserList {
-		id: number;
-		name: string;
-		age: number;
-		gender: '0' | '1' | null;
-		email: string;
-		address: string;
-		role: RoleType;
-		disabled: boolean;
-	}
-}

src/typings/naive-ui.d.ts

@@ -0,0 +1,3 @@
+declare namespace NaiveUI {
+  type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+}

src/typings/union-key.d.ts

@@ -0,0 +1,4 @@
+declare namespace UnionKey { 
+  /* http请求头content-type类型 */
+  type ContentType = 'application/json' | 'application/x-www-form-urlencoded' | 'multipart/form-data';
+}

src/views/list/commonList/index.vue

@@ -132,161 +132,160 @@
 </template>
 
 <script setup lang="tsx">
-import { onMounted, ref, h } from 'vue';
+	import { onMounted, ref, h } from 'vue';
-import { fetchUserList } from '@/service';
+	import { fetchUserList } from '@/service';
-import type { DataTableColumns } from 'naive-ui';
+	import type { DataTableColumns } from 'naive-ui';
-import { NButton, NPopconfirm, NSpace, NSwitch, NTag, FormInst } from 'naive-ui';
+	import { NButton, NPopconfirm, NSpace, NSwitch, NTag, FormInst } from 'naive-ui';
-import { useLoading, useBoolean } from '@/hooks';
+	import { useLoading, useBoolean } from '@/hooks';
-import TableModal from './components/TableModal.vue';
+  import {genderLabels} from '@/constants'
+	import TableModal from './components/TableModal.vue';
 
-const { loading, startLoading, endLoading } = useLoading(false);
+	const { loading, startLoading, endLoading } = useLoading(false);
-const { bool: visible, setTrue: openModal } = useBoolean(false);
+	const { bool: visible, setTrue: openModal } = useBoolean(false);
 
-const initialModel = { condition_1: '', condition_2: '', condition_3: '', condition_4: '' };
+	const initialModel = { condition_1: '', condition_2: '', condition_3: '', condition_4: '' };
-const model = ref({ ...initialModel });
+	const model = ref({ ...initialModel });
 
-const formRef = ref<FormInst | null>();
+	const formRef = ref<FormInst | null>();
-const columns: DataTableColumns = [
+	const columns: DataTableColumns = [
-	{
+		{
-		title: '姓名',
+			title: '姓名',
-		align: 'center',
+			align: 'center',
-		key: 'name',
+			key: 'name',
-	},
-	{
-		title: '年龄',
-		align: 'center',
-		key: 'age',
-	},
-	{
-		title: '性别',
-		align: 'center',
-		key: 'gender',
-		render: (row) => {
-			const rowData = row as unknown as CommonList.UserList;
-			const tagType = {
-				'0': {
-					label: '女',
-					type: 'primary',
-				},
-				'1': {
-					label: '男',
-					type: 'success',
-				},
-			} as const;
-			if (rowData.gender) {
-				return <NTag type={tagType[rowData.gender].type}>{tagType[rowData.gender].label}</NTag>;
-			}
 		},
-	},
+		{
-	{
+			title: '年龄',
-		title: '邮箱',
+			align: 'center',
-		align: 'center',
+			key: 'age',
-		key: 'email',
-	},
-	{
-		title: '地址',
-		align: 'center',
-		key: 'address',
-	},
-	{
-		title: '角色',
-		align: 'center',
-		key: 'role',
-		render: (row) => {
-			const rowData = row as unknown as CommonList.UserList;
-			const tagType = {
-				super: 'primary',
-				admin: 'warning',
-				user: 'success',
-			} as const;
-			return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>;
 		},
-	},
+		{
-	{
+			title: '性别',
-		title: '状态',
+			align: 'center',
-		align: 'center',
+			key: 'gender',
-		key: 'disabled',
+			render: (row) => {
-		render: (row) => {
+				const rowData = row as unknown as CommonList.UserList;
-			const rowData = row as unknown as CommonList.UserList;
+				const tagType = {
+					0: 'primary',
+					1: 'success',
+				} as const;
+				if (rowData.gender) {
+					return <NTag type={tagType[rowData.gender]}>{genderLabels[rowData.gender]}</NTag>;
+				}
+			},
+		},
+		{
+			title: '邮箱',
+			align: 'center',
+			key: 'email',
+		},
+		{
+			title: '地址',
+			align: 'center',
+			key: 'address',
+		},
+		{
+			title: '角色',
+			align: 'center',
+			key: 'role',
+			render: (row) => {
+				const rowData = row as unknown as CommonList.UserList;
+				const tagType: Record<Auth.RoleType, NaiveUI.ThemeColor> = {
+					super: 'primary',
+					admin: 'warning',
+					user: 'success',
+				};
+				return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>;
+			},
+		},
+		{
+			title: '状态',
+			align: 'center',
+			key: 'disabled',
+			render: (row) => {
+				const rowData = row as unknown as CommonList.UserList;
 
-			return (
+				return (
-				<NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
+					<NSwitch
-					{{ checked: () => '启用', unchecked: () => '禁用' }}
+						value={rowData.disabled}
-				</NSwitch>
+						onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
-			);
+						{{ checked: () => '启用', unchecked: () => '禁用' }}
+					</NSwitch>
+				);
+			},
 		},
-	},
+		{
-	{
+			title: '操作',
-		title: '操作',
+			align: 'center',
-		align: 'center',
+			key: 'actions',
-		key: 'actions',
+			render: (row) => {
-		render: (row) => {
+				const rowData = row as unknown as CommonList.UserList;
-			const rowData = row as unknown as CommonList.UserList;
+				return (
-			return (
+					<NSpace justify={'center'}>
-				<NSpace justify={'center'}>
+						<NButton
-					<NButton size={'small'} onClick={() => handleEditTable(rowData)}>
+							size={'small'}
-						编辑
+							onClick={() => handleEditTable(rowData)}>
-					</NButton>
+							编辑
-					<NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
+						</NButton>
-						{{
+						<NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
-							default: () => '确认删除',
+							{{
-							trigger: () => <NButton size={'small'}>删除</NButton>,
+								default: () => '确认删除',
-						}}
+								trigger: () => <NButton size={'small'}>删除</NButton>,
-					</NPopconfirm>
+							}}
-				</NSpace>
+						</NPopconfirm>
-			);
+					</NSpace>
+				);
+			},
 		},
-	},
+	];
-];
+	const sendMail = (id: number) => {
-const sendMail = (id: number) => {
+		window.$message.success(`用户id:${id}`);
-	window.$message.success(`用户id:${id}`);
+	};
-};
+	function handleUpdateDisabled(disabled: boolean, id: number) {
-function handleUpdateDisabled(disabled: boolean, id: number) {
+		const index = listData.value.findIndex((item) => item.id === id);
-	const index = listData.value.findIndex((item) => item.id === id);
+		if (index > -1) {
-	if (index > -1) {
+			listData.value[index].disabled = disabled;
-		listData.value[index].disabled = disabled;
+		}
 	}
-}
 
-const listData = ref<CommonList.UserList[]>([]);
+	const listData = ref<CommonList.UserList[]>([]);
 
-onMounted(() => {
+	onMounted(() => {
-	getUserList();
+		getUserList();
-});
-async function getUserList() {
-	startLoading();
-	await fetchUserList().then((res: any) => {
-		listData.value = res.data;
-		endLoading();
 	});
-}
+	async function getUserList() {
-function changePage(page: number, size: number) {
+		startLoading();
-	window.$message.success(`分页器:${page},${size}`);
+		await fetchUserList().then((res: any) => {
-}
+			listData.value = res.data;
-function handleResetSearch() {
+			endLoading();
-	model.value = { ...initialModel };
+		});
-}
+	}
+	function changePage(page: number, size: number) {
+		window.$message.success(`分页器:${page},${size}`);
+	}
+	function handleResetSearch() {
+		model.value = { ...initialModel };
+	}
 
-type ModalType = 'add' | 'edit';
+	type ModalType = 'add' | 'edit';
-const modalType = ref<ModalType>('add');
+	const modalType = ref<ModalType>('add');
-function setModalType(type: ModalType) {
+	function setModalType(type: ModalType) {
-	modalType.value = type;
+		modalType.value = type;
-}
+	}
 
-const editData = ref<CommonList.UserList | null>(null);
+	const editData = ref<CommonList.UserList | null>(null);
-function setEditData(data: CommonList.UserList | null) {
+	function setEditData(data: CommonList.UserList | null) {
-	editData.value = data;
+		editData.value = data;
-}
+	}
 
-function handleEditTable(rowData: CommonList.UserList) {
+	function handleEditTable(rowData: CommonList.UserList) {
-	setEditData(rowData);
+		setEditData(rowData);
-	setModalType('edit');
+		setModalType('edit');
-	openModal();
+		openModal();
-}
+	}
-function handleAddTable() {
+	function handleAddTable() {
-	openModal();
+		openModal();
-	setModalType('add');
+		setModalType('add');
-}
+	}
 </script>
 
 <style scoped></style>

src/views/test/test1/index.vue

@@ -25,6 +25,14 @@
       >
         use online post
       </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="formPost"
+      >
+        use online formPost
+      </n-button>
       <n-button
         strong
         secondary
@@ -41,30 +49,6 @@
       >
         use online put
       </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="patch"
-      >
-        use online patch
-      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="mock"
-      >
-        to use mock
-      </n-button>
-      <n-button
-        strong
-        secondary
-        type="success"
-        @click="patch"
-      >
-        use online patch
-      </n-button>
       <n-button
         strong
         secondary
@@ -113,10 +97,10 @@
 <script setup lang="ts">
 import {
 	fetachGet,
-	fetachPost,
+  fetachPost,
+  fetachFormPost,
 	fetachDelete,
 	fetachPut,
-	fetachPatch,
 	fetchMock,
 	testFailedRequest,
 	testFailedResponse,
@@ -130,7 +114,7 @@ const pinter = () => {
 	msg.value = import.meta.env;
 };
 const get = () => {
-	fetachGet().then((res) => {
+	fetachGet({a:112211}).then((res) => {
 		msg.value = res;
 	});
 };
@@ -152,6 +136,15 @@ const post = () => {
 		msg.value = res;
 	});
 };
+
+function formPost() {
+  const params = {
+		data: '2022-2-2',
+	};
+  fetachFormPost(params).then((res) => {
+		msg.value = res;
+	});
+}
 const put = () => {
 	const params = {
 		data: '2022-2-2',
@@ -160,14 +153,6 @@ const put = () => {
 		msg.value = res;
 	});
 };
-const patch = () => {
-	const params = {
-		data: '2022-2-2',
-	};
-	fetachPatch(params).then((res) => {
-		msg.value = res;
-	});
-};
 
 // 测试请求失败
 const failedRequest = () => {