我正在尝试使用SweetAlert2，但是当出现问题时，我遇到了显示错误消息的问题。此外，当用户按下“取消”按钮时，控制台会显示错误：未捕获（承诺）取消。
简而言之，我的网站上有一个按钮。如果用户按下该按钮，则会出现确认对话框（使用SweetAlert2）。这是我的代码：
swal({
title: "Are you sure?",
text: "You will not be able to undo this action!",
type: "warning",
showCancelButton: true,
cancelButtonText: 'No, cancel!',
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, do it!",
allowOutsideClick: false
preConfirm: function () {
return axios.put('/api/endpoint')
.then(response => {
console.log('success')
})
.catch(error => {
console.log('failure')
swal({
title: "Something went wrong",
type: "error",
})
});
}
}).then(function (result) {
if (result.value) {
swal('Deleted!', 'Your file has been deleted.', 'success')
} else if (result.dismiss === 'cancel') {
swal('Cancelled', 'Your file is safe :)', 'error')
}
});
如果出现问题，最好显示另一个说“出问题”的SweetAlert2对话框，但不是这样，看起来SweetAlert2以某种方式捕获错误并将其显示在同一个确认框中。此外，取消按钮存在问题：如果用户取消，控制台将显示已提及的错误。
SweetAlert2使用promises，我还在学习如何正确使用它们，所以也许有些东西我做错了。
请帮忙吗？
提前致谢
答案 0 :(得分：0)
我刚刚第一次搞清楚了SWAL2中的承诺，并且因为它而在改进我的Web应用程序的部分UX方面取得了一些重大进展。我经常使用SWAL2模态，并发现当在SWAL模式中获取用户输入并验证该输入时，promise最有效。
我正在使用JQuery 3.2.1和PHP 5.6版
这是尝试做我正在做的事情的第一种方法，所以请不要认为它将完全适合您的项目。我还在做一些测试，所以记住这一点。
我的总体目标是让用户在第一次登录他们的个人资料后输入我需要的其他信息（和/或他们有必要数据库值的空字段）。
以下是我在宏观层面上使用Promises和Ajax的基础：
swal({...}).then(function(result){ //introduction modal
swal({...}).then(function(result){ //start getting required info
swal({...}).then(function(result){ //get some more required info
}, function (dismiss) {}).catch(swal.noop);
}, function (dismiss) {}).catch(swal.noop);
}, function (dismiss) {}).catch(swal.noop);
这些模态中的每一个都有我需要的不同输入，我需要验证，除了第一个。
swal({
html:'Welcome to my web app!',
imageUrl: '../path-to-image.png',
imageWidth: 350,
imageAlt: 'My Logo',
animation: false,
showCancelButton: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Complete My Profile',
cancelButtonText: 'Cancel',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
focusConfirm: false
}).then(function(result) {
在我的＃34;欢迎来到XYZ网络应用程序＆＃34;问候，我立即开始我的下一个模态。这非常简单。如果用户点击他们可以点击的绿色按钮，则调出下一个模态，或者如果他们通过单击它关闭它们，则显示另一个模态。我的代码继续：
swal({
title: 'Your Basic Information',
html:
'<div class="form-group"><input type="text" class="form-control" id="FName" name="FName" placeholder="Last Name"></div>'+
'<div class="form-group"><input type="text" class="phone_us form-control" maxlength="14" data-mask="(000) 000-0000" id="userPhone" name="userPhone" placeholder="Phone Number"></div>'+
'<div class="form-group"><div class="input-group"><span class="input-group-addon">$</span><input type="text" class="money form-control" id="avgPrice" name="avgPrice" data-mask="#,##0.00" data-mask-reverse="true" maxlength="5" placeholder="Average Price of your Advice"/></div></div>'+
'<div class="form-group"><textarea class="form-control" name="FInfo" id="FInfo" rows="6" placeholder="Give people a summary of who you are and what kind of great stuff you can do for them."></textarea></div>'+
'<div class="form-group"><label for="FType">Type of kitchen</label><select class="form-control" name="FType" id="FType"><option>--Select--</option><option>Type 1</option><option>Type 2</option><option>Type 3</option><option>Type 4</option><option>Type 5</option></select></div>',
showCancelButton: false,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Update and Continue',
cancelButtonText: 'Cancel',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
focusConfirm: false,
preConfirm: function () {
//Set our Ajax variables in the start of preConfirm
//We could've just made a form element as part of the html, and used a FormData class or form_name.serialize(). The current way is for illustration.
var userPhone = $('#userPhone').val(), FName = $('#FName').val(), avgPrice = $('#avgPrice').val(), FInfo = $('#FInfo').val(), FType = $('#FType').val(), retData = [];
以上变量都是除retData之外的所有输入值。 retData是一个数组，用于存储我从PHP收到的错误字符串。然后，我可以告诉JQuery迭代数组并将这些错误显示为toastr通知。有很多方法可以使用JSON，是的。
这里有我想要的肉和土豆。现在我们可以使用Promise继续运行我们的Ajax请求，每次用户点击，并保持模态打开，直到满足某个条件（所有信息都经过验证，没有错误）。
return new Promise(function (resolve) {
//Run our actual ajax request inside the promise. Keeps the SWAL2 modal open
$.ajax({
url: prefix+'settings_val_first_modal.php',
type: 'POST',
data: ({userPhone: userPhone, FName: FName, avgPrice: avgPrice, FInfo: FInfo, FType: FType}),
success: function(show) {
retData.push.apply(retData, show.split(","));
//Define the condition that keeps us in the promise.
if(Number(retData[0]) === 0){
//Remove the zero from our error array
retData.shift();
$.each(retData, function(i, val){
//Display each array element as separate toastr notification
toastr.error(retData[i]);
});
} else{
//Define the condition that breaks us out of the promise
resolve(true);
}
}
});
});
}
然后，一旦满足该条件，我们就可以使用
向下移动模态链}).then(function(result){
然后做任何我们想要的事情，比如为照片上传添加另一个swal，或者用另一个swal向用户表示感谢。
swal('You\'re all finished!','You now have full access to XYZ web app!','success');
然后我们确保为第二个模态定义我们的dismiss函数。就我而言，信息swal模式：
}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'overlay') {
swal(
'Please Finish Your Profile',
'You need to have a completed profile before you can start using XYZ web application',
'info'
);
}
}).catch(swal.noop);
我们有它。我知道这是一个相当冗长的解释，但我发现这种用法最适合承诺和SWAL2。完成代码后，我们需要定义第一个模态被解除的情况。
}, function (dismiss) {
// dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
if (dismiss === 'overlay') {
swal(
'Please Contemplate Your Life',
'Don\'t make me have to toggle this modal again! I\'d rather not!',
'info'
);
}
}).catch(swal.noop);
最终，我从一个目标开始 - 改善用户体验。 Promise在这里起作用，因为否则，每次按钮点击后模态都会关闭，如果用户做了一些简单的事情，如果没有包含带电子邮件输入的@或其他内容，则必须再次启动整个链。
承诺让我们在屏幕上保留SWAL2模态，直到满足某些条件。条件可以是任何东西，在我的情况下，PHP中的表单验证将字符串返回到javascript。如果输入正常，则字符串为＆＃39; 1＆＃39;。否则，该字符串包含类似＆＃39; 0，＆＃34;无效的电话号码＆＃34;，＆＃34;帐户已与此电子邮件关联＆＃34;，＆＃34;等＆＃34;＆＃39 ;。然后，JQuery创建一个数组，删除前导零，并为数组中的每个错误输出toastr通知。
我希望这有助于您使用SWAL2。