js中的异步函数中如何阻止下一步执行？

Question

 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("未设置平台")
                }

返回的数据结构如下：

{"total":0,"rows":[],"code":200,"msg":"查询成功"}

如上述代码加了IF判断，但是在浏览器中还是报错。

Uncaught (in promise) TypeError: response.rows[0] is undefined
    handlePlant index.vue:401
    promise callback*handlePlant index.vue:400
    click index.vue:350
    VueJS 4
    handleClick element-ui.common.js:9457

怎么阻止？

Answer 1

已经解决，采用response.total > 0
但是之前也试过，看样子应该是浏览器缓存影响的。

Answer 2

报错说response.rows[0]未定义 那你判断response.rows[0]是否存在啊

Answer 3

handlePlant index.vue:401 是不是你这边的业务代码位置？
点一下后面的 index.vue:401 就会在 devTools 中定位到异常处了，看看代码是否有问题。也有可能缓存之类的导致。

如果实在排查不了可以考虑使用 可选链运算符（?.） 来处理。

- this.$set(this.form2, "platAddr", response.rows[0].platAddr)
+ this.$set(this.form2, "platAddr", response.rows[0]?.platAddr)