feat(util): 网络请求异常提示采用 i18n 处理

src/hooks/app/useI18n.ts

+import { i18n } from '/@/locales'
+
+type I18nGlobalTranslation = {
+    (key: string): string
+    (key: string, locale: string): string
+    (key: string, locale: string, list: unknown[]): string
+    (key: string, locale: string, named: Record<string, unknown>): string
+    (key: string, list: unknown[]): string
+    (key: string, named: Record<string, unknown>): string
+}
+
+type I18nTranslationRestParameters = [string, any]
+
+function getKey(namespace: string | undefined, key: string) {
+    if (!namespace) {
+        return key
+    }
+    if (key.startsWith(namespace)) {
+        return key
+    }
+    return `${namespace}.${key}`
+}
+
+export function useI18n(namespace?: string): {
+    t: I18nGlobalTranslation
+} {
+    const normalFn = {
+        t: (key: string) => {
+            return getKey(namespace, key)
+        },
+    }
+
+    if (!i18n) {
+        return normalFn
+    }
+
+    const { t, ...methods } = i18n.global
+
+    const tFn: I18nGlobalTranslation = (key: string, ...arg: any[]) => {
+        if (!key) return ''
+        if (!key.includes('.') && !namespace) return key
+        // @ts-ignore
+        return t(getKey(namespace, key), ...(arg as I18nTranslationRestParameters))
+    }
+    return {
+        ...methods,
+        t: tFn,
+    }
+}
+
+// Why write this function？
+// Mainly to configure the vscode i18nn ally plugin. This function is only used for routing and menus. Please use useI18n for other places
+
+// 为什么要编写此函数？
+// 主要用于配合vscode i18nn ally插件。此功能仅用于路由和菜单。请在其他地方使用useI18n
+export const t = (key: string) => key

src/locales/lang/zh-Hans/sys.json

+{
+    "api": {
+        "operationFailed": "操作失败",
+        "errorTip": "错误提示",
+        "successTip": "成功提示",
+        "errorMessage": "操作失败,系统异常!",
+        "timeoutMessage": "'登录信息过期,请重新登录!'",
+        "apiTimeoutMessage": "接口请求超时,请刷新页面重试!",
+        "apiRequestFailed": "请求出错，请稍候重试",
+        "networkException": "网络异常",
+        "networkExceptionMsg": "网络异常，请检查您的网络连接是否正常!",
+
+        "errMsg401": "用户没有权限（令牌、用户名、密码错误）!",
+        "errMsg403": "用户得到授权，但是访问是被禁止的。!",
+        "errMsg404": "网络请求错误,未找到该资源!",
+        "errMsg405": "网络请求错误,请求方法未允许!",
+        "errMsg408": "网络请求超时!",
+        "errMsg500": "服务器错误,请联系管理员!",
+        "errMsg501": "网络未实现!",
+        "errMsg502": "网络错误!",
+        "errMsg503": "服务不可用，服务器暂时过载或维护!",
+        "errMsg504": "网络超时!",
+        "errMsg505": "http版本不支持该请求!"
+    }
+}

src/utils/http/axios/checkStatus.ts

 import type { ErrorMessageMode } from '/#/axios'
 import { useMessage } from '/@/hooks/app/useMessage'
+import { useI18n } from '/@/hooks/app/useI18n'
 import * as HTTP from '/@/api/types'
 
 const { createMessage, createErrorModal } = useMessage()
 
 export function checkStatus(status: number, _msg: string, errorMessageMode: ErrorMessageMode = 'message'): void {
-    const errMessage = status === undefined ? '网络异常' : HTTP.toMessage(status)
+    const { t } = useI18n()
+    const errMessage = status === undefined ? t('sys.api.networkException') : HTTP.toMessage(status)
 
     if (errMessage) {
         if (errorMessageMode === 'modal') {
-            createErrorModal({ title: '错误提示', content: errMessage })
+            createErrorModal({ title: t('sys.api.errorTip'), content: errMessage })
         } else if (errorMessageMode === 'message') {
             createMessage.error(errMessage)
         }

src/utils/http/axios/index.ts

@@ -8,6 +8,7 @@ import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'
 import { VAxios } from './Axios'
 import { checkStatus } from './checkStatus'
 import { useGlobSetting } from '/@/hooks/setting'
+import { useI18n } from '/@/hooks/app/useI18n'
 import { useMessage } from '/@/hooks/app/useMessage'
 import { RequestEnum, ContentTypeEnum } from '/@/enums/httpEnum'
 import { isString } from '/@/utils/is'
@@ -31,6 +32,7 @@ const transform: AxiosTransform = {
      * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误
      */
     transformRequestHook: (res: AxiosResponse<Result>, options: RequestOptions) => {
+        const { t } = useI18n()
         const { isTransformResponse, isReturnNativeResponse } = options
         // 是否返回原生响应头 比如：需要获取响应头时使用该属性
         if (isReturnNativeResponse) {
@@ -46,7 +48,7 @@ const transform: AxiosTransform = {
         const { data } = res
         if (!data) {
             // return '[HTTP] Request has no return value';
-            throw new Error('请求出错，请稍候重试')
+            throw new Error(t('sys.api.apiRequestFailed'))
         }
         //  这里 status，body，message为 后台统一的字段，需要在 types.ts 内修改为项目自己的接口返回格式
         const { status, body, message, details } = data
@@ -62,7 +64,7 @@ const transform: AxiosTransform = {
         let timeoutMsg = ''
         switch (status) {
             case HTTP.Status.UNAUTHORIZED:
-                timeoutMsg = '登录信息过期,请重新登录!'
+                timeoutMsg = t('sys.api.timeoutMessage')
                 clearAuthCache()
 
                 // TODO: 跳转到登录页
@@ -82,12 +84,12 @@ const transform: AxiosTransform = {
         // errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
         // errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示
         if (options.errorMessageMode === 'modal') {
-            createErrorModal({ title: '错误提示', content: timeoutMsg })
+            createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg })
         } else if (options.errorMessageMode === 'message') {
             createMessage.error(timeoutMsg)
         }
 
-        throw new Error(timeoutMsg || '请求出错，请稍候重试')
+        throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))
     },
 
     // 请求之前处理config
@@ -162,6 +164,7 @@ const transform: AxiosTransform = {
      * @description: 响应错误处理
      */
     responseInterceptorsCatch: (axiosInstance: AxiosResponse, error: any) => {
+        const { t } = useI18n()
         const { response, code, message, config } = error || {}
         const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none'
         const msg: string = response?.data?.error?.message ?? ''
@@ -170,15 +173,15 @@ const transform: AxiosTransform = {
 
         try {
             if (code === 'ECONNABORTED' && message.indexOf('timeout') !== -1) {
-                errMessage = '接口请求超时,请重试!'
+                errMessage = t('sys.api.apiTimeoutMessage')
             }
             if (err?.includes('Network Error')) {
-                errMessage = '网络异常，请检查您的网络连接是否正常!'
+                errMessage = t('sys.api.networkExceptionMsg')
             }
 
             if (errMessage) {
                 if (errorMessageMode === 'modal') {
-                    createErrorModal({ title: '错误提示', content: errMessage })
+                    createErrorModal({ title: t('sys.api.errorTip'), content: errMessage })
                 } else if (errorMessageMode === 'message') {
                     createMessage.error(errMessage)
                 }