Uncaught (in promise) 使用 SweetAlert2 取消答案

【问题标题】：Uncaught (in promise) cancel using SweetAlert2Uncaught (in promise) 使用 SweetAlert2 取消
【发布时间】：2023-03-14 11:07:01
【问题描述】：

如何在使用 Promise 时正确地转义取消按钮而不抛出错误？我的代码使用必填复选框引发警报确认。代码按用户应有的方式执行，但在控制台窗口中抛出错误：

未捕获（承诺）取消

//validation logic all passes...Now proceed to...

 else
    {

//determine and parse Discounts

 var myLookup = document.getElementsByName("myLookup")[0].value;
$.post( "findthem.php", {myLookup: myLookup })
  .done(function(json_data){
     var theResponse1 = $.parseJSON(json_data);
     myDiscountRate = theResponse1['ourDiscountFound'];

    }).then( function(callback){

    priceRate = priceRate * (1 - (.01 * myDiscountRate));
    newRate = priceRate.toFixed(2);
}

swal({
  title: "Confirm",
  input: 'checkbox',
  inputValue: 0,
  type: "warning",
  inputPlaceholder: 'I agree to <a href="#blahblahMore"></a> Your new Rate is :'+newRate,
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  showLoaderOnConfirm: true,
  preConfirm: function(result) {
    return new Promise(function(resolve, reject) {
      if (result) {
        $.post("my.php", {
          Data: data
        })
        .done(
          function(json_data) {
            var data_array = $.parseJSON(json_data);
            var moreDetails = '';
            var resulting = 'error';
            var details = "Transaction Declined"
            if (data_array["trxApproved"] == true) {
              resulting = 'success';
              details = "Confirmed"
              moreDetails = "<br>Approved<b>" + data_array["approved"] + "</b>" +
                "<br>Details Code: <b>" + data_array["detailsCode"] + "</b>";
            }
            swal({
              type: resulting,
              title: details,
              html: "<h1>Details: </h1>" + data_array["messagetext"] + moreDetails
            });
          }
        );
        resolve();
      } else {
          reject('You must agree to our Terms & Conditions ');
      }
    });
  },
  allowOutsideClick: false
  }).then(function(json_data) {

  })
});

【问题讨论】：

提示：避免使用Promise constructor antipattern。
你能正确缩进你的代码吗？我无法辨别所有这些功能在哪里结束。
感谢@guest271314 的缩进。看起来关闭 }) 太多了。你能发布你的完整代码吗？
@Bergi 我尝试添加更多代码，但不知道如何在不使事情过于复杂的情况下这样做，我需要在将表单数据推送到处理之前处理我的复选框逻辑
@Bergi 是的，我正在使用limonte.github.io/sweetalert2，我似乎无法在文档中找到如何使用 Promise 覆盖“取消”确认

标签： javascript jquery ajax sweetalert sweetalert2

【解决方案1】：

new Promise(function(resolve, reject) { 不是必需的。 $.post() 返回一个 jQuery 承诺对象。

可能的解决方案将Promise.reject() 替换为new Promise() 构造函数；删除了作为第一个 swal() 调用的选项放置的 .then()；模式似乎期望从preConfirm 返回一个Promise，但不确定从.done() 返回的值是什么，而不是json_data。

swal({
  title: "Confirm",
  input: 'checkbox',
  inputValue: 0,
  type: "warning",
  inputPlaceholder: 'I agree to <a href="#blahblahMore"></a>',
  showCancelButton: true,
  confirmButtonText: 'Confirm',
  showLoaderOnConfirm: true,
  preConfirm: function(result) {
      if (result) {
        return $.post("my.php", {
          Data: data
        })
        .done(
          function(json_data) {
            var data_array = $.parseJSON(json_data);
            var moreDetails = '';
            var resulting = 'error';
            var details = "Transaction Declined"
            if (data_array["trxApproved"] == true) {
              resulting = 'success';
              details = "Confirmed"
              moreDetails = "<br>Approved<b>" + data_array["approved"] + "</b>" +
                "<br>Details Code: <b>" + data_array["detailsCode"] + "</b>";
            }
            swal({
              type: resulting,
              title: details,
              html: "<h1>Details: </h1>" + data_array["messagetext"] + moreDetails
            });
          }
        );
      } else {
          return Promise.reject('You must agree to our Terms & Conditions ');
      }
  },
  allowOutsideClick: false
});

【讨论】：

如何解决未捕获拒绝的问题？
你的最后一句话应该是评论，而不是答案。
@Bergi "这如何解决未捕获拒绝的问题？" 首先建议删除不必要的Promise 构造函数。 “您的最后一句话应该是评论，而不是答案。” 不确定错误是否是由于未捕获的未定义result？将需要一分钟来整理$.post()、.done()、.then() 的重新排列并检查其他可能的错误。
关于“// return ?”：不，您不能通过done 回调来return。如果它是一个then 回调，它可能是有意义的。
您要求“否决描述”，所以我解释了它。答案应该是独立的，它们不是交流媒介（如 cmets）。他们应该回答第一个发布版本的问题。我觉得你的帖子没有包含问题的解决方案，所以我使用了“无用”按钮。

【解决方案2】：

按下取消按钮时，SweetAlert2 拒绝结果承诺。你可以handle that:

swal({
  …
}).then(function(json_data) {
  …
}, function(dismiss) {
  if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
    // ignore
  } else {
    throw dismiss;
  }
})

如果您不需要对json_data 执行任何操作，您也可以使用catch method。

【讨论】：

这是 SweetAlert2 :) 原始 SweetAlert 已经 11 个月不受支持。
SweetAlert2 从 v7 开始默认不拒绝承诺：github.com/sweetalert2/sweetalert2/releases/tag/v7.0.0

【解决方案3】：

更新（2017 年 1 月）：此问题已在 v7 中修复：v7 upgrade guide ↗

您需要向 Promise 添加拒绝处理程序。或者，您可以使用.catch(swal.noop) 作为一种简单的方法来简单地抑制错误：

swal('...')
  .catch(swal.noop);

PS。您正在使用的包名为 SweetAlert2，而不是 SweetAlert。在以后的问题中，请提及它，以便您获得更多相关的答案。

【讨论】：

谢谢，将我的最终（占位符）.then 更改为 .done 成功了
呃，done 是这个方法的一个可怕的名称，它应该被称为 ignoreDismissals 或类似的名称（假设解雇是拒绝承诺的唯一原因）。 done 方法恰恰相反——在全局上下文中抛出未处理的拒绝——在 Q 承诺库和许多其他受它启发的库中。
@Bergi .done() was replaced by .catch(swal.noop)，感谢您的意见。

【解决方案4】：

你需要捕捉到取消的动作

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function(json_data) {
  //delete item
}, function(dismiss) {
  if (dismiss === 'cancel' || dismiss === 'close') {
    // ignore
  } 
})

【讨论】：

【解决方案5】：

添加 catch(swal.noop);最后swal函数会解决这个问题

例如：

swal({

}).then(function() {

}).catch(swal.noop);

【讨论】：