feat: ✨ 修改 请求报错提示

src/App.tsx

@@ -10,13 +10,14 @@ import 'antd/dist/reset.css';
 import { IntlProvider } from 'react-intl';
 import { useMemo } from 'react';
 import router from './router';
-import { localeConfig } from './locales';
+import { localeConfig, setIntl } from './locales';
 import { useStoreApp } from './hooks/setting/useStoreApp';
 
 function App() {
   const { locale, color, themeMode } = useStoreApp();
 
   const getLocale = useMemo(() => {
+    setIntl(locale);
     if (locale === 'en-US') {
       dayjs.locale('en');
       return enUS;

src/hooks/web/useMessage.tsx

@@ -1,21 +1,17 @@
-// import { useI18n } from '@/hooks/web/useI18n';
+import type { ModalFuncProps } from 'antd';
+import { message, Modal } from 'antd';
 
-import { message } from 'antd';
+import { getIntlFormatMessage } from '@/locales';
 
-// const { t } = useI18n();
-
-// function createElMessageBox(messageg: string, title: string, options: ElMessageBoxOptions) {
-//   message
-//     .config(messageg, title, options)
-//     .then(() => {})
-//     .catch(() => {});
-// }
+function createElMessageBox(messageg: string, title: string, options: ModalFuncProps) {
+  Modal.error({ title, content: messageg, ...options });
+}
 
-function createErrorModal(msg: string) {
-  message.error(msg);
+export function createErrorModal(msg: string) {
+  createElMessageBox(msg, getIntlFormatMessage('api.errorTip'), { centered: true });
 }
 
-function createErrorMsg(msg: string) {
+export function createErrorMsg(msg: string) {
   message.error(msg);
 }
 

src/locales/en_US/index.ts

@@ -1,9 +1,11 @@
 import menu from './modules/menu';
 import layout from './modules/layout';
+import api from './modules/api';
 
 const en_US = {
   ...menu,
   ...layout,
+  ...api,
 };
 
 export default en_US;

src/locales/en_US/modules/api.ts

@@ -0,0 +1,17 @@
+const api = {
+  'api.errorTip': 'Error Tip',
+  'api.errMsg401': 'The user does not have permission!',
+  'api.errMsg403': 'The user is authorized, but access is forbidden!',
+  'api.errMsg404': 'Network request error, the resource was not found!',
+  'api.errMsg405': 'Network request error, request method not allowed!',
+  'api.errMsg408': 'Network request timed out!',
+  'api.errMsg500': 'Server error, please contact the administrator!',
+  'api.errMsg501': 'The network is not implemented!',
+  'api.errMsg502': 'Network Error!',
+  'api.errMsg503':
+    'The service is unavailable, the server is temporarily overloaded or maintained!',
+  'api.errMsg504': 'Network timeout!',
+  'api.errMsg505': 'The http version does not support the request!',
+};
+
+export default api;

src/locales/index.tsx

@@ -1,5 +1,5 @@
-import type { MessageDescriptor } from 'react-intl';
-import { useIntl, FormattedMessage as IntFormattedMessage } from 'react-intl';
+import type { IntlShape, MessageDescriptor } from 'react-intl';
+import { createIntl, useIntl, FormattedMessage as IntFormattedMessage } from 'react-intl';
 import en_US from './en_US';
 import zh_CN from './zh_CN';
 
@@ -31,3 +31,49 @@ export const useLocale = () => {
     formatMessage,
   };
 };
+
+let g_intl: IntlShape;
+
+/**
+ * 获取当前的 intl 对象，可以在 node 中使用
+ * @param locale 需要切换的语言类型
+ * @param changeIntl 是否不使用 g_intl
+ * @returns IntlShape
+ */
+export const getIntl = (locale?: LocaleType, changeIntl?: boolean) => {
+  // 如果全局的 g_intl 存在，且不是 setIntl 调用
+  if (g_intl && !changeIntl && !locale) {
+    return g_intl;
+  }
+  // 如果存在于 localeInfo 中
+  if (locale && localeConfig[locale]) {
+    return createIntl({
+      locale,
+      messages: localeConfig[locale],
+    });
+  }
+  // 使用 zh-CN
+  if (localeConfig['zh-CN'])
+    return createIntl({
+      locale: 'zh-CN',
+      messages: localeConfig['zh-CN'],
+    });
+
+  // 如果还没有，返回一个空的
+  return createIntl({
+    locale: 'zh-CN',
+    messages: {},
+  });
+};
+
+export const getIntlFormatMessage = (id: Id) => {
+  return getIntl().formatMessage({ id });
+};
+
+/**
+ * 切换全局的 intl 的设置
+ * @param locale 语言的key
+ */
+export const setIntl = (locale: LocaleType) => {
+  g_intl = getIntl(locale, true);
+};

src/locales/zh_CN/index.ts

@@ -1,9 +1,11 @@
 import menu from './modules/menu';
 import layout from './modules/layout';
+import api from './modules/api';
 
 const zh_CN = {
   ...menu,
   ...layout,
+  ...api,
 };
 
 export default zh_CN;

src/locales/zh_CN/modules/api.ts

@@ -0,0 +1,16 @@
+const api = {
+  'api.errorTip': '错误提示',
+  'api.errMsg401': '用户没有权限!',
+  'api.errMsg403': '用户得到授权，但是访问是被禁止的。!',
+  'api.errMsg404': '网络请求错误,未找到该资源!',
+  'api.errMsg405': '网络请求错误,请求方法未允许!',
+  'api.errMsg408': '网络请求超时!',
+  'api.errMsg500': '服务器错误,请联系管理员!',
+  'api.errMsg501': '网络未实现!',
+  'api.errMsg502': '网络错误!',
+  'api.errMsg503': '服务不可用，服务器暂时过载或维护!',
+  'api.errMsg504': '网络超时!',
+  'api.errMsg505': 'http版本不支持该请求!',
+};
+
+export default api;

src/utils/axios/axiosStatus.ts

@@ -1,61 +1,58 @@
-import { message } from 'antd';
 import type { ErrorMessageMode } from '#/axios';
-// import i18n from '@/locales';
-// import { useMessage } from '@/hooks/web/useMessage';
-// const { createErrorModal, createErrorMsg } = useMessage();
+import { getIntlFormatMessage } from '@/locales';
+import { createErrorModal, createErrorMsg } from '@/hooks/web/useMessage';
 
 export function checkStatus(
   status: number,
   msg: string,
   errorMessageMode: ErrorMessageMode = 'message',
 ): void {
-  // const { t } = i18n.global;
-  const errMessage = '';
+  let errMessage = '';
 
-  // switch (status) {
-  //   case 400:
-  //     errMessage = `${msg}`;
-  //     break;
-  //   case 401:
-  //     errMessage = t('api.errMsg401');
-  //     break;
-  //   case 403:
-  //     errMessage = t('api.errMsg403');
-  //     break;
-  //   case 404:
-  //     errMessage = t('api.errMsg404');
-  //     break;
-  //   case 405:
-  //     errMessage = t('api.errMsg405');
-  //     break;
-  //   case 408:
-  //     errMessage = t('api.errMsg408');
-  //     break;
-  //   case 500:
-  //     errMessage = t('api.errMsg500');
-  //     break;
-  //   case 501:
-  //     errMessage = t('api.errMsg501');
-  //     break;
-  //   case 502:
-  //     errMessage = t('api.errMsg502');
-  //     break;
-  //   case 503:
-  //     errMessage = t('api.errMsg503');
-  //     break;
-  //   case 504:
-  //     errMessage = t('api.errMsg504');
-  //     break;
-  //   case 505:
-  //     errMessage = t('api.errMsg505');
-  //     break;
-  //   default:
-  // }
+  switch (status) {
+    case 400:
+      errMessage = `${msg}`;
+      break;
+    case 401:
+      errMessage = getIntlFormatMessage('api.errMsg401');
+      break;
+    case 403:
+      errMessage = getIntlFormatMessage('api.errMsg403');
+      break;
+    case 404:
+      errMessage = getIntlFormatMessage('api.errMsg404');
+      break;
+    case 405:
+      errMessage = getIntlFormatMessage('api.errMsg405');
+      break;
+    case 408:
+      errMessage = getIntlFormatMessage('api.errMsg408');
+      break;
+    case 500:
+      errMessage = getIntlFormatMessage('api.errMsg500');
+      break;
+    case 501:
+      errMessage = getIntlFormatMessage('api.errMsg501');
+      break;
+    case 502:
+      errMessage = getIntlFormatMessage('api.errMsg502');
+      break;
+    case 503:
+      errMessage = getIntlFormatMessage('api.errMsg503');
+      break;
+    case 504:
+      errMessage = getIntlFormatMessage('api.errMsg504');
+      break;
+    case 505:
+      errMessage = getIntlFormatMessage('api.errMsg505');
+      break;
+    default:
+  }
   if (errMessage) {
     if (errorMessageMode === 'modal') {
-      message.error(msg);
+      createErrorModal(errMessage);
     } else if (errorMessageMode === 'message') {
-      message.error(msg);
+      createErrorMsg(errMessage);
     }
   }
 }

src/utils/axios/index.ts

@@ -2,11 +2,9 @@ import { isString } from 'lodash-es';
 import { defineMessages } from 'react-intl';
 import type { AxiosInterceptor, CreateAxiosOptions } from './axiosConfig';
 import { iAxios } from './iAxios';
-// import { checkStatus } from './axiosStatus';
+import { checkStatus } from './axiosStatus';
 import { errorData } from './errorConfig';
-// import { useMessage } from '@/hooks/web/useMessage';
-
-// const { createErrorModal, createErrorMsg } = useMessage();
+import { createErrorModal, createErrorMsg } from '@/hooks/web/useMessage';
 
 /**
  * @description:一下所有拦截器请根据自身使用场景更改
@@ -34,9 +32,9 @@ const interceptor: AxiosInterceptor = {
           }),
         );
         if (errorMessageMode === 'modal') {
-          // createErrorModal(data.message);
+          createErrorModal(data.message);
         } else if (errorMessageMode === 'message') {
-          // createErrorMsg(data.message);
+          createErrorMsg(data.message);
         }
         return errorData(res);
       } else {
@@ -102,9 +100,9 @@ const interceptor: AxiosInterceptor = {
    * @description: 响应拦截器错误处理
    */
   responseInterceptorsCatch: (error: any) => {
-    // const { response, message, config } = error || {};
-    // const errorMessageMode = config.requestOptions.errorMessageMode || 'none';
-    // checkStatus(response ? response.status : 404, message, errorMessageMode);
+    const { response, message, config } = error || {};
+    const errorMessageMode = config.requestOptions.errorMessageMode || 'none';
+    checkStatus(response ? response.status : 404, message, errorMessageMode);
     return error;
   },
 };

src/views/Login/index.tsx

@@ -20,7 +20,6 @@ const Login = memo(() => {
   const navigate = useNavigate();
 
   const onLogin = async (): Promise<void> => {
-    console.log('??????');
     const res = await getUserInfo(user, pwd);
     if (res.code === 1) {
       setStorage<UseInfoType>('userInfo', res.data);