此前端框架下的 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'))},