vben-admin 2.8.0 版本修改 axios响应处理逻辑
此前端框架下的 Axios 在后端返回的结果老是无法正常解析，找到他源码的封装类，修正这个问题
文件位于 src\utils\http\axios\index.ts
修改前
transformResponseHook: (res: AxiosResponse<Result>, options: RequestOptions) => {const { t } = useI18n()const { isTransformResponse, isReturnNativeResponse } = options// 是否返回原生响应头 比如：需要获取响应头时使用该属性if (isReturnNativeResponse) {return res}// 不进行任何处理，直接返回// 用于页面代码可能需要直接获取code，data，message这些信息时开启if (!isTransformResponse) {return res.data}// 错误的时候返回const { data } = resif (!data) {// return '[HTTP] Request has no return value';throw new Error(t('sys.api.apiRequestFailed'))}// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式const { code, result, message } = data// 这里逻辑可以根据项目进行修改const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESSif (hasSuccess) {return result}// 在此处根据自己项目的实际情况对不同的code执行不同的操作// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可let timeoutMsg = ''switch (code) {case ResultEnum.TIMEOUT:timeoutMsg = t('sys.api.timeoutMessage')const userStore = useUserStoreWithOut()userStore.setToken(undefined)userStore.logout(true)breakdefault:if (message) {timeoutMsg = message}}// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示if (options.errorMessageMode === 'modal') {createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg })} else if (options.errorMessageMode === 'message') {createMessage.error(timeoutMsg)}throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))},重点是这几行的解析有问题, Res 无法直接解构到 data
const { data } = resif (!data) {// return '[HTTP] Request has no return value';throw new Error(t('sys.api.apiRequestFailed'))}// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式const { code, result, message } = data// 这里逻辑可以根据项目进行修改const hasSuccess = data && Reflect.has(data, 'code') && code === ResultEnum.SUCCESSif (hasSuccess) {return result}修改后
transformResponseHook: (res: AxiosResponse<Result>, options: RequestOptions) => {const { t } = useI18n()const { isTransformResponse, isReturnNativeResponse } = options// 是否返回原生响应头 比如：需要获取响应头时使用该属性if (isReturnNativeResponse) {return res}// 不进行任何处理，直接返回// 用于页面代码可能需要直接获取code，data，message这些信息时开启if (!isTransformResponse) {return res.data}// 错误的时候返回const content = res.data;if (!content) {// return '[HTTP] Request has no return value';throw new Error(t('sys.api.apiRequestFailed'))}// 这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式const { code, data, message } = content// 这里逻辑可以根据项目进行修改const hasSuccess = content && Reflect.has(content, 'code') && code === ResultEnum.SUCCESSif (hasSuccess) {return data}// 在此处根据自己项目的实际情况对不同的code执行不同的操作// 如果不希望中断当前请求，请return数据，否则直接抛出异常即可let timeoutMsg = ''switch (code) {case ResultEnum.TIMEOUT:timeoutMsg = t('sys.api.timeoutMessage')const userStore = useUserStoreWithOut()userStore.setToken(undefined)userStore.logout(true)breakdefault:if (message) {timeoutMsg = message}}// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示if (options.errorMessageMode === 'modal') {createErrorModal({ title: t('sys.api.errorTip'), content: timeoutMsg })} else if (options.errorMessageMode === 'message') {createMessage.error(timeoutMsg)}throw new Error(timeoutMsg || t('sys.api.apiRequestFailed'))},