javascript - 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

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)

Answer 2

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

Answer 3

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

Answer 4

在JavaScript中，异步函数（如使用.then()方法的函数）并不会直接阻止后续代码的执行，而是允许代码在等待某个操作（如网络请求）完成时继续执行。在你的代码中，getPlat函数可能还没有完成其异步操作（例如，它可能还在等待服务器的响应），而你的代码已经试图访问返回的结果了。

在你的例子中，错误消息Uncaught (in promise) TypeError: response.rows[0] is undefined表明response.rows数组是空的（或者response.rows本身就是undefined），因此尝试访问response.rows[0]时会导致错误。这可能是因为getPlat函数的异步操作还没有完成，或者服务器返回的数据中没有rows属性，或者rows数组是空的。

为了解决这个问题，你可以在访问response.rows[0]之前先检查response.rows是否存在并且长度大于0。这样，如果response.rows是空的，你的代码就不会尝试访问response.rows[0]，从而避免了错误。

以下是一个修改后的代码示例：

getPlat({"tenantId":row.id}).then(response=>{    console.log(response.rows.length)    if(response.total>0 && response.rows && 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 && response.rows.length > 0来检查response.rows是否存在并且长度大于0。这样，只有当response.rows存在并且长度大于0时，代码才会尝试访问response.rows[0]，从而避免了错误。