From b218f10e25a9364c399a5fe42eedb549f57c01ea Mon Sep 17 00:00:00 2001 From: Netfan Date: Fri, 28 May 2021 00:07:28 +0800 Subject: [PATCH] fix(login): login page modal style fixed: #662 (#666) * fix: catch axios error data on request * fix(login): login page modal style fixed: #662 --- src/locales/lang/en/sys.ts | 1 + src/locales/lang/zh_CN/sys.ts | 1 + src/store/modules/user.ts | 2 +- src/utils/http/axios/Axios.ts | 12 ++++++++---- src/utils/http/axios/index.ts | 24 +++++++++++++----------- src/views/sys/login/LoginForm.vue | 9 ++++++++- 6 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/locales/lang/en/sys.ts b/src/locales/lang/en/sys.ts index db6b0889..3b296007 100644 --- a/src/locales/lang/en/sys.ts +++ b/src/locales/lang/en/sys.ts @@ -5,6 +5,7 @@ export default { errorMessage: 'The operation failed, the system is abnormal!', timeoutMessage: 'Login timed out, please log in again!', apiTimeoutMessage: 'The interface request timed out, please refresh the page and try again!', + apiRequestFailed: 'The interface request failed, please try again later!', networkException: 'network anomaly', networkExceptionMsg: 'Please check if your network connection is normal! The network is abnormal', diff --git a/src/locales/lang/zh_CN/sys.ts b/src/locales/lang/zh_CN/sys.ts index 642c3332..0e9b5978 100644 --- a/src/locales/lang/zh_CN/sys.ts +++ b/src/locales/lang/zh_CN/sys.ts @@ -5,6 +5,7 @@ export default { errorMessage: '操作失败,系统异常!', timeoutMessage: '登录超时,请重新登录!', apiTimeoutMessage: '接口请求超时,请刷新页面重试!', + apiRequestFailed: '请求出错，请稍候重试', networkException: '网络异常', networkExceptionMsg: '请检查您的网络连接是否正常!', diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index aae47090..d5ad7fec 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -100,7 +100,7 @@ export const useUserStore = defineStore({ !sessionTimeout && goHome && (await router.replace(PageEnum.BASE_HOME)); return userInfo; } catch (error) { - return null; + return Promise.reject(error); } }, async getUserInfoAction({ userId }: GetUserInfoByUserIdParams) { diff --git a/src/utils/http/axios/Axios.ts b/src/utils/http/axios/Axios.ts index 1872f742..35ac7437 100644 --- a/src/utils/http/axios/Axios.ts +++ b/src/utils/http/axios/Axios.ts @@ -8,7 +8,7 @@ import { AxiosCanceler } from './axiosCancel'; import { isFunction } from '/@/utils/is'; import { cloneDeep } from 'lodash-es'; -import { errorResult } from './const'; +//import { errorResult } from './const'; import { ContentTypeEnum } from '/@/enums/httpEnum'; import { RequestEnum } from '../../../enums/httpEnum'; @@ -208,11 +208,15 @@ export class VAxios { .request>(conf) .then((res: AxiosResponse) => { if (transformRequestHook && isFunction(transformRequestHook)) { - const ret = transformRequestHook(res, opt); - ret !== errorResult ? resolve(ret) : reject(new Error('request error!')); + try { + const ret = transformRequestHook(res, opt); + resolve(ret); + } catch (err) { + reject(err || new Error('request error!')); + } return; } - resolve((res as unknown) as Promise); + resolve(res as unknown as Promise); }) .catch((e: Error) => { if (requestCatchHook && isFunction(requestCatchHook)) { diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts index 73e115c7..c8447a7d 100644 --- a/src/utils/http/axios/index.ts +++ b/src/utils/http/axios/index.ts @@ -18,7 +18,7 @@ import { getToken } from '/@/utils/auth'; import { setObjToUrlParams, deepMerge } from '/@/utils'; import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog'; -import { errorResult } from './const'; +//import { errorResult } from './const'; import { useI18n } from '/@/hooks/web/useI18n'; import { createNow, formatRequestDate } from './helper'; @@ -31,7 +31,7 @@ const { createMessage, createErrorModal } = useMessage(); */ const transform: AxiosTransform = { /** - * @description: 处理请求数据 + * @description: 处理请求数据。如果数据不是预期格式，可直接抛出错误 */ transformRequestHook: (res: AxiosResponse, options: RequestOptions) => { const { t } = useI18n(); @@ -50,7 +50,8 @@ const transform: AxiosTransform = { const { data } = res; if (!data) { // return '[HTTP] Request has no return value'; - return errorResult; + throw new Error(t('sys.api.apiRequestFailed')); + //return errorResult; } // 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式 const { code, result, message } = data; @@ -66,8 +67,8 @@ const transform: AxiosTransform = { createMessage.error(message); } } - Promise.reject(new Error(message)); - return errorResult; + throw new Error(message); + //return errorResult; } // 接口请求成功，直接返回结果 @@ -78,13 +79,13 @@ const transform: AxiosTransform = { if (code === ResultEnum.ERROR) { if (message) { createMessage.error(data.message); - Promise.reject(new Error(message)); + throw new Error(message); } else { const msg = t('sys.api.errorMessage'); createMessage.error(msg); - Promise.reject(new Error(msg)); + throw new Error(msg); } - return errorResult; + //return errorResult; } // 登录超时 if (code === ResultEnum.TIMEOUT) { @@ -93,10 +94,11 @@ const transform: AxiosTransform = { title: t('sys.api.operationFailed'), content: timeoutMsg, }); - Promise.reject(new Error(timeoutMsg)); - return errorResult; + throw new Error(timeoutMsg); + //return errorResult; } - return errorResult; + throw new Error(t('sys.api.apiRequestFailed')); + //return errorResult; }, // 请求之前处理config diff --git a/src/views/sys/login/LoginForm.vue b/src/views/sys/login/LoginForm.vue index f521d6a1..9972a586 100644 --- a/src/views/sys/login/LoginForm.vue +++ b/src/views/sys/login/LoginForm.vue @@ -118,7 +118,7 @@ }, setup() { const { t } = useI18n(); - const { notification } = useMessage(); + const { notification, createErrorModal } = useMessage(); const { prefixCls } = useDesign('login'); const userStore = useUserStore(); @@ -149,6 +149,7 @@ toRaw({ password: data.password, username: data.account, + mode: 'none', //不要默认的错误提示 }) ); if (userInfo) { @@ -158,6 +159,12 @@ duration: 3, }); } + } catch (error) { + createErrorModal({ + title: t('sys.api.errorTip'), + content: error.message || t('sys.api.networkExceptionMsg'), + getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body, + }); } finally { loading.value = false; } -- GitLab