记录前端调用后端接口返回List 查询的数量对了但里面却是Null值情况

在这里插入图片描述

究其原因 还是因为 编写XML查询语句要指定 resultMap="pojoResultMap"

此结果集影射的map 是你自己写的 map 对应实体类和数据库表字段

在这里插入图片描述

如果用 resultType ,没有使用 resultMap 就会出现上述情况!

前端开发中,`TypeError: undefined is not iterable` 是一个常见的运行时错误,通常表示尝试对一个非可迭代对象(如 `undefined` 或 `null`)进行迭代操作。为了避免此类问题,特别是在处理后端接口返回的数据时,确保数据格式为数组是关键。 ### 1. 后端接口返回数据应始终为数组格式 如果后端返回的数据结构不一致,例如有时返回数组,有时返回 `null` 或 `undefined`,前端在使用扩展运算符、`for...of` 循环或解构赋时就会出错。因此,后端应确保在接口设计中始终返回数组格式的数据,即使数据为,也应返回 `[]` 而不是 `null` 或 `undefined`。 示例: ```json { "data": [] } ``` ### 2. 前端接口数据进行类型校验和默认处理 即使后端返回了预期格式的数据,前端在使用时也应进行类型校验。例如,在 Vue 组件中调用 `handleTree` 方法时,可以使用默认确保参数为数组: ```javascript handleTree(items = []) { for (const item of items) { console.log(item); } } ``` 这样即使传入的是 `undefined`,也会被默认替换为 `[]`,从而避免 `TypeError` 的发生[^2]。 ### 3. 使用异步数据前确保其格式正确 在 Vue 中,常常会遇到异步获取数据后调用处理函数的情况。为避免数据尚未返回时就调用函数导致错误,应在数据返回后进行格式判断: ```javascript async fetchData() { const response = await fetch('/api/tree'); const result = await response.json(); if (Array.isArray(result.data)) { this.treeData = result.data; } else { this.treeData = []; } } ``` 通过 `Array.isArray()` 检查返回是否为数组,可以确保即使后端返回异常格式,前端也能安全处理[^2]。 ### 4. 后端开发规范建议 为了减少前端处理复杂性,后端在设计接口时应遵循以下原则: - 所有集合型数据字段(如 `list`, `items`, `treeData`)应始终返回数组类型。 - 数据应返回数组 `[]`,而非 `null` 或 `undefined`。 - 接口文档应明确说明返回字段的类型,便于前端进行类型校验和处理。 ### 示例代码 ```javascript // Vue 组件中处理异步数据 export default { data() { return { treeData: [] }; }, async mounted() { const response = await fetch('/api/tree'); const result = await response.json(); if (Array.isArray(result.data)) { this.treeData = result.data; } else { this.treeData = []; } } }; ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值