refactor: 优化错误处理逻辑

src/page/role/index.tsx

@@ -19,6 +19,8 @@ import AddRoleDialogue from "@/components/add-role-dialogue"
 import type { RoleFormValues } from "@/components/role-display-form"
 import EditRoleDialogue from "@/components/edit-role-dialogue"
 import { addRole } from "@/api/role"
+import type { AntFormValidationError } from "@/types/antd"
+import { AntUtils } from "@/utils"
 
 export default function RolePage() {
   const { message, modal } = App.useApp()
@@ -62,19 +64,26 @@ export default function RolePage() {
   }
 
   const onAddRoleFinish = async () => {
-    try {
+    addRoleForm
-      const values = await addRoleForm.validateFields()
+      .validateFields()
-      await RoleApi.addRole(values)
+      .then(async (values) => {
-      void message.success(`角色 ${values.name} 创建成功`)
+        try {
-      return true
+          await RoleApi.addRole(values)
-    } catch (error: unknown) {
+          void message.success(`角色 ${values.name} 创建成功`)
-      if (error instanceof Error && error.message.includes("Validation Failed")) {
+        } catch (error: unknown) {
-        return false
+          if (axios.isAxiosError<GeneralErrorResponse>(error)) {
-      } else if (axios.isAxiosError<GeneralErrorResponse>(error)) {
+            void message.error(error.response?.data.message ?? "创建失败，请稍后再试")
-        void message.error(error.response?.data.message ?? "创建失败，请稍后再试")
+          } else if (error instanceof Error) {
-      }
+            void message.error(error.message)
-      return false
+          } else {
-    }
+            void message.error("发生未知错误，新增角色信息失败。")
+          }
+          return false
+        }
+      })
+      .catch((error: AntFormValidationError<RoleFormValues>) => {
+        void message.error(`角色信息检验失败：${AntUtils.getFieldErrorMessage(error)}`)
+      })
   }
 
   const handleAddRole = () => {
@@ -102,20 +111,16 @@ export default function RolePage() {
   }
 
   const onEditRoleFinish = async () => {
-    try {
+    editRoleForm
-      const values = await editRoleForm.validateFields()
+      .validateFields()
-      // console.log(values)
+      .then(async (values) => {
-      await RoleApi.editRole(values)
+        // console.log(values)
-      void message.success(`角色 ${values.name} 修改成功`)
+        await RoleApi.editRole(values)
-      return true
+        void message.success(`角色 ${values.name} 修改成功`)
-    } catch (error: unknown) {
+      })
-      if (error instanceof Error && error.message.includes("Validation Failed")) {
+      .catch((error: AntFormValidationError<RoleFormValues>) => {
-        return false
+        void message.error(`角色信息检验失败：${AntUtils.getFieldErrorMessage(error)}`)
-      } else if (axios.isAxiosError<GeneralErrorResponse>(error)) {
+      })
-        void message.error(error.response?.data.message ?? "创建失败，请稍后再试")
-      }
-      return false
-    }
   }
 
   const handleEditRole = (role: Role) => {

src/types/antd/index.ts

@@ -19,3 +19,16 @@ export interface AntSelectOptionItem {
 }
 
 export type AntSelectOption = AntSelectOptionItem[]
+
+export interface AntFieldError {
+  errors: string[]
+  name: string[]
+  warnings: unknown[]
+}
+
+export interface AntFormValidationError<T> {
+  values: T
+  message: string
+  outOfDate: boolean
+  errorFields: AntFieldError[]
+}

src/utils/ant-utils/index.ts

@@ -0,0 +1,5 @@
+import type { AntFormValidationError } from "@/types/antd"
+
+export function getFieldErrorMessage(error: AntFormValidationError<unknown>): string {
+  return error.errorFields.map((errorField) => errorField.errors.join("，")).join("；")
+}

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * as PhoneNumberUtils from "./phone-number-utils"
 export * as DepartmentUtils from "./department-utils"
+export * as AntUtils from "./ant-utils"