vant 2 弹出框报错 Uncaught (in promise) cancel

最新推荐文章于 2023-05-11 17:04:53 发布

原创最新推荐文章于 2023-05-11 17:04:53 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

踩坑日记专栏收录该内容

10 篇文章

订阅专栏

在Vue CLI 3搭建的项目中，使用Vant 2的Dialog弹出框组件时遇到点击取消按钮报'Uncaught (in promise) cancel'的错误。该错误是因为在调用confirm时没有处理Promise的catch，导致未捕获的异常。为解决此问题，需要在使用confirm方法后添加catch块来捕获并处理可能出现的错误。

场景：

vue-cli3 + vant

问题描述

使用了Dialog异步关闭的官方示例, 点击取消时, 控制台报错 Uncaught (in promise) cancel, 不影响一般用户使用, 但是看着不舒服

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose,
});

原因分析：

confirm使用了promise, 需要在confirm后加catch, 否则无法捕获错误

解决方案：

function beforeClose(action, done) {
  if (action === 'confirm') {
    setTimeout(done, 1000);
  } else {
    done();
  }
}

Dialog.confirm({
  title: '标题',
  message: '弹窗内容',
  beforeClose,
}).catch(() => {});