526互联

ElementUI: Uncaught (in promise) cancel 报错

发布时间 2023-04-24 17:38:15作者: Freya～

场景：使用 element  confirm 组件时，点击【取消】按钮，提示错误 Uncaught (in promise) cancel 

代码如下：

open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
}

点击【删除】，会弹出确认框，操作没问题。

点击【取消】，就会出现该错误。

通过排查，出现该问题的原因很简单。

this.$confirm 内置 promise 方法。当点击【确定】时，会执行.then(()=>{})部分逻辑；同理，当点击【取消】时，就会执行.catch(()=>{})捕获错误的逻辑。

所以我们只需要进行错误捕捉即可。

修改代码如下：

open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {});
      }