根据你提供的代码我看到了你的VAxios类实现。这里有一个关键问题需要修复以及一个可能的响应处理问题。以下是完整的解决方案问题分析主要问题在request方法中你添加了一个回调调用//zhangyafei---添加回调方法config.successconfig.success(res.data);//zhangyafei---添加回调方法这行代码会尝试调用config.success回调函数但你的 API 调用中并没有传递这个回调。这可能导致 undefined 错误。响应数据结构从你的uploadFile方法中的处理来看你的 API 响应格式可能是{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}}修正后的代码1. 首先修改你的product.api.tsimport{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}/** * 获取物料列表 * param params 查询参数 * returns Promise */exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params,// 如果你确实需要success回调可以这样传递// success: (data) console.log(请求成功, data)},{// 这里可以传递请求选项isTransformResponse:false,// 如果你希望直接获取原始响应});};2. 修改你的VAxios类中的request方法添加安全检查requestTany(config:AxiosRequestConfig,options?:RequestOptions):PromiseT{letconf:CreateAxiosOptionscloneDeep(config);consttransformthis.getTransform();const{requestOptions}this.options;constopt:RequestOptionsObject.assign({},requestOptions,options);const{beforeRequestHook,requestCatchHook,transformRequestHook}transform||{};if(beforeRequestHookisFunction(beforeRequestHook)){confbeforeRequestHook(conf,opt);}conf.requestOptionsopt;confthis.supportFormData(conf);returnnewPromise((resolve,reject){this.axiosInstance.requestany,AxiosResponseResult(conf).then((res:AxiosResponseResult){if(transformRequestHookisFunction(transformRequestHook)){try{constrettransformRequestHook(res,opt);// 添加安全检查避免调用 undefined 的回调if(config.successtypeofconfig.successfunction){config.success(res.data);}resolve(ret);}catch(err){reject(err||newError(request error!));}return;}resolve(resasunknownasPromiseT);}).catch((e:Error|AxiosError){if(requestCatchHookisFunction(requestCatchHook)){reject(requestCatchHook(e,opt));return;}if(axios.isAxiosError(e)){// 在此处重写来自axios的错误消息}reject(e);});});}3. 修正你的 Vue 组件代码template a-table :columnscolumns :data-sourcematerialList :paginationpagination :loadingloading changehandleTableChange rowKeyid /a-table /template script langts setup import { queryMaterialList } from //views/product/product.api.ts; import { ref, onMounted } from vue; const columns [ { title: 名称, dataIndex: materialName, key: materialName }, { title: 编码, dataIndex: materialCode, key: materialCode }, { title: 规格, dataIndex: specification, key: specification }, { title: 单位, dataIndex: unit, key: unit }, ]; const materialList ref([]); const pagination ref({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, pageSizeOptions: [10, 20, 50], showTotal: (total: number) 共 ${total} 条, }); const loading ref(false); async function fetchData() { loading.value true; try { // 传递分页参数 const params { pageNo: pagination.value.current, // 根据你的API调整参数名 pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(API Response:, res); // 处理响应数据 if (res) { // 根据你的实际响应结构调整 // 假设响应格式为: { success: true, data: { records: [], total: 100 } } if (res.data res.data.records) { materialList.value res.data.records; pagination.value.total res.data.total || 0; pagination.value.current res.data.current || params.pageNo; } // 或者直接返回数组 else if (Array.isArray(res)) { materialList.value res; pagination.value.total res.length; } // 或者返回分页对象 else if (res.records) { materialList.value res.records; pagination.value.total res.total || 0; } } } catch (error: any) { console.error(❌ 请求异常:, error.message); materialList.value []; } finally { loading.value false; } } const handleTableChange (pag: any) { pagination.value.current pag.current; pagination.value.pageSize pag.pageSize; fetchData(); }; onMounted(() { fetchData(); }); /script4. 调试建议如果仍然遇到res undefined的问题可以在浏览器控制台查看完整响应// 在 fetchData 中添加console.log(Full response:,JSON.stringify(res,null,2));检查网络请求打开浏览器开发者工具F12切换到 Network 标签刷新页面找到/material/page请求查看 Response 的实际格式添加响应拦截器调试在你的VAxios类中可以在 response 拦截器添加日志// 在 setupInterceptors 方法中this.axiosInstance.interceptors.response.use((res:AxiosResponseany){console.log(Response interceptor - raw:,res);resaxiosCanceler.removePending(res.config);if(responseInterceptorsisFunction(responseInterceptors)){resresponseInterceptors(res);console.log(Response interceptor - transformed:,res);}returnres;},undefined);这样可以帮你确定数据是在哪个环节丢失的。{ code: 200, message: success, data: { total: 19, records: [ { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT002, materialCode: MAT-IP13-256, materialName: iPhone 13, specification: 256G 粉色, unit: 台, categoryId: CAT001, supplierId: SUP001, barcode: 6901234567892, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT003, materialCode: MAT-IP14-128, materialName: iPhone 14, specification: 128G 紫色, unit: 台, categoryId: CAT001, supplierId: SUP001, barcode: 6901234567893, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT004, materialCode: MAT-HW-P50, materialName: 华为P50 Pro, specification: 8256G 曜金黑, unit: 台, categoryId: CAT001, supplierId: SUP002, barcode: 6901234567894, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT005, materialCode: MAT-HW-M40, materialName: 华为Mate 40 Pro, specification: 8256G 釉白色, unit: 台, categoryId: CAT001, supplierId: SUP002, barcode: 6901234567895, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT006, materialCode: MAT-XM-13, materialName: 小米13 Ultra, specification: 12512G 黑色, unit: 台, categoryId: CAT001, supplierId: SUP003, barcode: 6901234567896, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT007, materialCode: MAT-XM-PAD, materialName: 小米平板6, specification: 8128G 灰色, unit: 台, categoryId: CAT002, supplierId: SUP003, barcode: 6901234567897, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT008, materialCode: MAT-HW-PAD, materialName: 华为MatePad Pro, specification: 12256G 金色, unit: 台, categoryId: CAT002, supplierId: SUP002, barcode: 6901234567898, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT009, materialCode: MAT-IP-PAD, materialName: iPad Air 5, specification: 64G 银色, unit: 台, categoryId: CAT002, supplierId: SUP001, barcode: 6901234567899, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT010, materialCode: MAT-LENOVO, materialName: 联想ThinkPad X1, specification: i7/16G/512G 黑色, unit: 台, categoryId: CAT003, supplierId: SUP004, barcode: 6901234567810, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT011, materialCode: MAT-DELL, materialName: 戴尔XPS 13, specification: i7/16G/1T 银色, unit: 台, categoryId: CAT003, supplierId: SUP004, barcode: 6901234567811, status: 1 } ], current: 1, size: 10 } }非常好你发现了关键点。设置isTransformResponse: false确实会影响响应数据的格式。让我解释一下不同选项下的响应格式并提供完整的解决方案。不同选项下的响应格式1.isTransformResponse: false时返回的是原始的 Axios 响应对象{data:{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}},status:200,statusText:OK,headers:{...},config:{...}}2.isTransformResponse: true或不设置时默认返回的是转换后的数据通常是res.data的内容{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}}根据你的需求选择方案方案一使用默认转换推荐product.api.ts:import{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params}// 不传递第二个参数使用默认转换);};组件代码:script langts setup async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(API Response:, res); // 默认转换后res 就是响应体的 data 部分 // 假设格式: { success: true, data: { records: [], total: 100 } } if (res res.data) { materialList.value res.data.records || []; pagination.value.total res.data.total || 0; } // 或者如果直接返回分页对象: { records: [], total: 100 } else if (res res.records) { materialList.value res.records; pagination.value.total res.total || 0; } } catch (error) { console.error(请求失败:, error); } finally { loading.value false; } } /script方案二使用isTransformResponse: false需要更多处理product.api.ts:import{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params},{isTransformResponse:false,// 获取原始响应});};组件代码:script langts setup async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(Raw Response:, res); // 此时 res 是完整的 Axios 响应对象 // 需要访问 res.data 获取实际数据 if (res res.data) { // 假设后端返回格式: { success: true, data: { records: [], total: 100 } } if (res.data.data) { materialList.value res.data.data.records || []; pagination.value.total res.data.data.total || 0; } // 或者直接返回分页对象: { records: [], total: 100 } else if (res.data.records) { materialList.value res.data.records; pagination.value.total res.data.total || 0; } } } catch (error) { console.error(请求失败:, error); } finally { loading.value false; } } /script方案三通用处理函数最灵活创建一个工具函数来处理不同格式的响应script langts setup import { queryMaterialList } from //views/product/product.api.ts; import { ref, onMounted } from vue; // 通用响应处理函数 function processResponse(response: any) { // 处理 Axios 原始响应 if (response response.data) { // 如果 response.data 包含 success/data 结构 if (response.data.data response.data.data.records) { return { records: response.data.data.records, total: response.data.data.total || 0, current: response.data.data.current || 1, }; } // 如果 response.data 直接包含 records else if (response.data.records) { return { records: response.data.records, total: response.data.total || 0, current: response.data.current || 1, }; } } // 处理已经转换过的响应 if (response) { // 如果响应包含 data.records if (response.data response.data.records) { return { records: response.data.records, total: response.data.total || 0, current: response.data.current || 1, }; } // 如果响应直接包含 records else if (response.records) { return { records: response.records, total: response.total || 0, current: response.current || 1, }; } // 如果响应是数组 else if (Array.isArray(response)) { return { records: response, total: response.length, current: 1, }; } } // 默认返回空数据 return { records: [], total: 0, current: 1, }; } const columns [...]; // 你的列定义 const materialList ref([]); const pagination ref({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, pageSizeOptions: [10, 20, 50], showTotal: (total: number) 共 ${total} 条, }); const loading ref(false); async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(Response:, res); // 使用通用处理函数 const processed processResponse(res); materialList.value processed.records; pagination.value.total processed.total; pagination.value.current processed.current; } catch (error: any) { console.error(❌ 请求异常:, error.message); materialList.value []; } finally { loading.value false; } } const handleTableChange (pag: any) { pagination.value.current pag.current; pagination.value.pageSize pag.pageSize; fetchData(); }; onMounted(() { fetchData(); }); /script调试建议为了确定实际的数据格式建议先在浏览器控制台查看// 在 fetchData 中添加constresawaitqueryMaterialList(params);console.log(Response structure:,{hasData:!!res,keys:res?Object.keys(res):[],sample:res?JSON.stringify(res).substring(0,200)...:null});// 如果有 data 属性if(resres.data){console.log(Data structure:,{hasDataData:!!res.data.data,dataKeys:Object.keys(res.data),sample:JSON.stringify(res.data).substring(0,200)...});}这样你就能清楚地看到数据的实际结构然后根据实际结构调整处理逻辑。
### 2. `isTransformResponse: true` 或不设置时（默认） 返回的是转换后的数据，通常是 `res.data` 的内容：
根据你提供的代码我看到了你的VAxios类实现。这里有一个关键问题需要修复以及一个可能的响应处理问题。以下是完整的解决方案问题分析主要问题在request方法中你添加了一个回调调用//zhangyafei---添加回调方法config.successconfig.success(res.data);//zhangyafei---添加回调方法这行代码会尝试调用config.success回调函数但你的 API 调用中并没有传递这个回调。这可能导致 undefined 错误。响应数据结构从你的uploadFile方法中的处理来看你的 API 响应格式可能是{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}}修正后的代码1. 首先修改你的product.api.tsimport{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}/** * 获取物料列表 * param params 查询参数 * returns Promise */exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params,// 如果你确实需要success回调可以这样传递// success: (data) console.log(请求成功, data)},{// 这里可以传递请求选项isTransformResponse:false,// 如果你希望直接获取原始响应});};2. 修改你的VAxios类中的request方法添加安全检查requestTany(config:AxiosRequestConfig,options?:RequestOptions):PromiseT{letconf:CreateAxiosOptionscloneDeep(config);consttransformthis.getTransform();const{requestOptions}this.options;constopt:RequestOptionsObject.assign({},requestOptions,options);const{beforeRequestHook,requestCatchHook,transformRequestHook}transform||{};if(beforeRequestHookisFunction(beforeRequestHook)){confbeforeRequestHook(conf,opt);}conf.requestOptionsopt;confthis.supportFormData(conf);returnnewPromise((resolve,reject){this.axiosInstance.requestany,AxiosResponseResult(conf).then((res:AxiosResponseResult){if(transformRequestHookisFunction(transformRequestHook)){try{constrettransformRequestHook(res,opt);// 添加安全检查避免调用 undefined 的回调if(config.successtypeofconfig.successfunction){config.success(res.data);}resolve(ret);}catch(err){reject(err||newError(request error!));}return;}resolve(resasunknownasPromiseT);}).catch((e:Error|AxiosError){if(requestCatchHookisFunction(requestCatchHook)){reject(requestCatchHook(e,opt));return;}if(axios.isAxiosError(e)){// 在此处重写来自axios的错误消息}reject(e);});});}3. 修正你的 Vue 组件代码template a-table :columnscolumns :data-sourcematerialList :paginationpagination :loadingloading changehandleTableChange rowKeyid /a-table /template script langts setup import { queryMaterialList } from //views/product/product.api.ts; import { ref, onMounted } from vue; const columns [ { title: 名称, dataIndex: materialName, key: materialName }, { title: 编码, dataIndex: materialCode, key: materialCode }, { title: 规格, dataIndex: specification, key: specification }, { title: 单位, dataIndex: unit, key: unit }, ]; const materialList ref([]); const pagination ref({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, pageSizeOptions: [10, 20, 50], showTotal: (total: number) 共 ${total} 条, }); const loading ref(false); async function fetchData() { loading.value true; try { // 传递分页参数 const params { pageNo: pagination.value.current, // 根据你的API调整参数名 pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(API Response:, res); // 处理响应数据 if (res) { // 根据你的实际响应结构调整 // 假设响应格式为: { success: true, data: { records: [], total: 100 } } if (res.data res.data.records) { materialList.value res.data.records; pagination.value.total res.data.total || 0; pagination.value.current res.data.current || params.pageNo; } // 或者直接返回数组 else if (Array.isArray(res)) { materialList.value res; pagination.value.total res.length; } // 或者返回分页对象 else if (res.records) { materialList.value res.records; pagination.value.total res.total || 0; } } } catch (error: any) { console.error(❌ 请求异常:, error.message); materialList.value []; } finally { loading.value false; } } const handleTableChange (pag: any) { pagination.value.current pag.current; pagination.value.pageSize pag.pageSize; fetchData(); }; onMounted(() { fetchData(); }); /script4. 调试建议如果仍然遇到res undefined的问题可以在浏览器控制台查看完整响应// 在 fetchData 中添加console.log(Full response:,JSON.stringify(res,null,2));检查网络请求打开浏览器开发者工具F12切换到 Network 标签刷新页面找到/material/page请求查看 Response 的实际格式添加响应拦截器调试在你的VAxios类中可以在 response 拦截器添加日志// 在 setupInterceptors 方法中this.axiosInstance.interceptors.response.use((res:AxiosResponseany){console.log(Response interceptor - raw:,res);resaxiosCanceler.removePending(res.config);if(responseInterceptorsisFunction(responseInterceptors)){resresponseInterceptors(res);console.log(Response interceptor - transformed:,res);}returnres;},undefined);这样可以帮你确定数据是在哪个环节丢失的。{ code: 200, message: success, data: { total: 19, records: [ { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT002, materialCode: MAT-IP13-256, materialName: iPhone 13, specification: 256G 粉色, unit: 台, categoryId: CAT001, supplierId: SUP001, barcode: 6901234567892, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT003, materialCode: MAT-IP14-128, materialName: iPhone 14, specification: 128G 紫色, unit: 台, categoryId: CAT001, supplierId: SUP001, barcode: 6901234567893, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT004, materialCode: MAT-HW-P50, materialName: 华为P50 Pro, specification: 8256G 曜金黑, unit: 台, categoryId: CAT001, supplierId: SUP002, barcode: 6901234567894, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT005, materialCode: MAT-HW-M40, materialName: 华为Mate 40 Pro, specification: 8256G 釉白色, unit: 台, categoryId: CAT001, supplierId: SUP002, barcode: 6901234567895, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT006, materialCode: MAT-XM-13, materialName: 小米13 Ultra, specification: 12512G 黑色, unit: 台, categoryId: CAT001, supplierId: SUP003, barcode: 6901234567896, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT007, materialCode: MAT-XM-PAD, materialName: 小米平板6, specification: 8128G 灰色, unit: 台, categoryId: CAT002, supplierId: SUP003, barcode: 6901234567897, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT008, materialCode: MAT-HW-PAD, materialName: 华为MatePad Pro, specification: 12256G 金色, unit: 台, categoryId: CAT002, supplierId: SUP002, barcode: 6901234567898, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT009, materialCode: MAT-IP-PAD, materialName: iPad Air 5, specification: 64G 银色, unit: 台, categoryId: CAT002, supplierId: SUP001, barcode: 6901234567899, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT010, materialCode: MAT-LENOVO, materialName: 联想ThinkPad X1, specification: i7/16G/512G 黑色, unit: 台, categoryId: CAT003, supplierId: SUP004, barcode: 6901234567810, status: 1 }, { creator: admin, createTime: 2026-03-15 11:11:28, updater: admin, updateTime: 2026-03-15 11:11:28, deleted: 0, id: MAT011, materialCode: MAT-DELL, materialName: 戴尔XPS 13, specification: i7/16G/1T 银色, unit: 台, categoryId: CAT003, supplierId: SUP004, barcode: 6901234567811, status: 1 } ], current: 1, size: 10 } }非常好你发现了关键点。设置isTransformResponse: false确实会影响响应数据的格式。让我解释一下不同选项下的响应格式并提供完整的解决方案。不同选项下的响应格式1.isTransformResponse: false时返回的是原始的 Axios 响应对象{data:{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}},status:200,statusText:OK,headers:{...},config:{...}}2.isTransformResponse: true或不设置时默认返回的是转换后的数据通常是res.data的内容{success:true,code:200,message:操作成功,data:{records:[...],total:100,current:1,size:10}}根据你的需求选择方案方案一使用默认转换推荐product.api.ts:import{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params}// 不传递第二个参数使用默认转换);};组件代码:script langts setup async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(API Response:, res); // 默认转换后res 就是响应体的 data 部分 // 假设格式: { success: true, data: { records: [], total: 100 } } if (res res.data) { materialList.value res.data.records || []; pagination.value.total res.data.total || 0; } // 或者如果直接返回分页对象: { records: [], total: 100 } else if (res res.records) { materialList.value res.records; pagination.value.total res.total || 0; } } catch (error) { console.error(请求失败:, error); } finally { loading.value false; } } /script方案二使用isTransformResponse: false需要更多处理product.api.ts:import{defHttp}from//utils/http/axios;exportenumApi{queryMaterialList/material/page,}exportconstqueryMaterialList(params?:any){returndefHttp.get({url:Api.queryMaterialList,params},{isTransformResponse:false,// 获取原始响应});};组件代码:script langts setup async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(Raw Response:, res); // 此时 res 是完整的 Axios 响应对象 // 需要访问 res.data 获取实际数据 if (res res.data) { // 假设后端返回格式: { success: true, data: { records: [], total: 100 } } if (res.data.data) { materialList.value res.data.data.records || []; pagination.value.total res.data.data.total || 0; } // 或者直接返回分页对象: { records: [], total: 100 } else if (res.data.records) { materialList.value res.data.records; pagination.value.total res.data.total || 0; } } } catch (error) { console.error(请求失败:, error); } finally { loading.value false; } } /script方案三通用处理函数最灵活创建一个工具函数来处理不同格式的响应script langts setup import { queryMaterialList } from //views/product/product.api.ts; import { ref, onMounted } from vue; // 通用响应处理函数 function processResponse(response: any) { // 处理 Axios 原始响应 if (response response.data) { // 如果 response.data 包含 success/data 结构 if (response.data.data response.data.data.records) { return { records: response.data.data.records, total: response.data.data.total || 0, current: response.data.data.current || 1, }; } // 如果 response.data 直接包含 records else if (response.data.records) { return { records: response.data.records, total: response.data.total || 0, current: response.data.current || 1, }; } } // 处理已经转换过的响应 if (response) { // 如果响应包含 data.records if (response.data response.data.records) { return { records: response.data.records, total: response.data.total || 0, current: response.data.current || 1, }; } // 如果响应直接包含 records else if (response.records) { return { records: response.records, total: response.total || 0, current: response.current || 1, }; } // 如果响应是数组 else if (Array.isArray(response)) { return { records: response, total: response.length, current: 1, }; } } // 默认返回空数据 return { records: [], total: 0, current: 1, }; } const columns [...]; // 你的列定义 const materialList ref([]); const pagination ref({ current: 1, pageSize: 10, total: 0, showSizeChanger: true, pageSizeOptions: [10, 20, 50], showTotal: (total: number) 共 ${total} 条, }); const loading ref(false); async function fetchData() { loading.value true; try { const params { pageNo: pagination.value.current, pageSize: pagination.value.pageSize, }; const res await queryMaterialList(params); console.log(Response:, res); // 使用通用处理函数 const processed processResponse(res); materialList.value processed.records; pagination.value.total processed.total; pagination.value.current processed.current; } catch (error: any) { console.error(❌ 请求异常:, error.message); materialList.value []; } finally { loading.value false; } } const handleTableChange (pag: any) { pagination.value.current pag.current; pagination.value.pageSize pag.pageSize; fetchData(); }; onMounted(() { fetchData(); }); /script调试建议为了确定实际的数据格式建议先在浏览器控制台查看// 在 fetchData 中添加constresawaitqueryMaterialList(params);console.log(Response structure:,{hasData:!!res,keys:res?Object.keys(res):[],sample:res?JSON.stringify(res).substring(0,200)...:null});// 如果有 data 属性if(resres.data){console.log(Data structure:,{hasDataData:!!res.data.data,dataKeys:Object.keys(res.data),sample:JSON.stringify(res.data).substring(0,200)...});}这样你就能清楚地看到数据的实际结构然后根据实际结构调整处理逻辑。
