在javascript异步函数中如何避免undefined错误?
在使用异步函数处理数据时,经常会遇到由于数据未返回或返回的数据结构不符合预期而导致的错误。本文将针对一个实际案例,分析如何避免response.rows[0] is undefined这类错误。
问题代码片段如下:
getplat({ "tenantid": row.id }).then(response => { console.log(response.rows.length) if (response.total > 0) { this.$set(this.form2, "plataddr", response.rows[0].plataddr) this.$set(this.form2, "platdesc", response.rows[0].platdesc) this.$set(this.form2, "platdomain", response.rows[0].platdomain) this.$set(this.form2, "platlogo", response.rows[0].platlogo) this.$set(this.form2, "platname", response.rows[0].platname) this.$set(this.form2, "id", response.rows[0].id) } else { console.log("未设置平台") } });
这段代码调用getplat函数获取平台信息。getplat函数返回一个promise对象,其结果是一个包含total和rows属性的对象。rows属性是一个数组,包含平台信息。代码中使用if (response.total > 0)判断是否有数据,但仍然出现了uncaught (in promise) typeerror: response.rows[0] is undefined错误。
这个问题的根本原因在于,即使response.total > 0条件成立,也不能保证response.rows数组中至少有一个元素。如果response.rows是一个空数组,那么response.rows[0]将会是undefined,访问response.rows[0]的属性就会导致错误。
虽然提问者提到使用response.total > 0解决了问题,这暗示问题可能与浏览器缓存有关,但根本的解决方法是更严谨地处理response.rows数组为空的情况。 更好的解决方案是在访问response.rows[0]之前,先判断数组是否为空:
getPlat({ "tenantId": row.id }).then(response => { console.log(response.rows.length); if (response.total > 0 && response.rows.length > 0) { this.$set(this.form2, "platAddr", response.rows[0].platAddr); this.$set(this.form2, "platDesc", response.rows[0].platDesc); this.$set(this.form2, "platDomain", response.rows[0].platDomain); this.$set(this.form2, "platLogo", response.rows[0].platLogo); this.$set(this.form2, "platName", response.rows[0].platName); this.$set(this.form2, "id", response.rows[0].id); } else { console.log("未设置平台或数据异常"); } });
通过添加response.rows.length > 0条件,可以有效避免访问undefined元素导致的错误,使代码更健壮。