javascript - 如何让sweetalert返回true/false以进行无 promise 确认？

我喜欢javascript确认的简单性，因此我可以这样做:

if(!confirm("are you sure?"))
    return;

在sweetalert中，您必须将true代码嵌套在then promise函数中。

有没有一种方法可以让sweetalert返回true/false，就像在JS确认中一样？

最佳答案

按照设计，SweetAlert uses Promises可以跟踪用户如何与基于HTML的警报交互，而则是无阻塞的(您仍然可以与网页/UI交互)，而不是浏览器的内置 confirm() 方法。在显示模式窗口之前，它会阻止用户访问该程序的其余部分，直到对话框关闭为止。

您不能调用具有相同接口(interface)阻塞行为的 swal() ，就好像它是另一种confirm()一样。但是，通过使用ES2017的 async / await 功能，您可以以类似的方式编写代码，并在不阻塞接口(interface)的情况下实现的相同目标。

为了能够在浏览器中使用async/await，请使用转译器(例如Babel)将ES2015+ features的源代码转译/转换为ES5，即widely supported:

-在swal()语句中使用if而不进行换行:

您可以简单地使用swal(...)调用await:

if (!await swal({text: 'Are you sure?', buttons: true})) {
    return;
}

并且，当将SweetAlert用作truthy(Promise，当用户确认警报时)或falsy(否则为true)作为SweetAlert guides语句中所述的null语句的条件时，if将解决。

-在带有包装的swal()语句中使用if类似于confirm():

为了提供confirm()的熟悉程度，请将带有所需选项的swal(...)分隔为 async function :

async function confirm(message) {
    return swal({
        text: message,
        buttons: true
    });
}

然后在以if开头的await语句中使用它，就好像它是一种confirm()形式一样，它也将按预期工作:

if (!await confirm('Are you sure?')) {
    return;
}

要考虑的事情:

在await之外使用async function是currently not supported。要解决此问题，请将您的代码放在事件处理程序中:

document.addEventListener('DOMContentLoaded', async () => {
    // ... await and other async code here
});

或使用async IFEE 或 IIAFE :

(async () => {
    // ... await and other async code here
})();

为了轻松地转换包含ES2015 +功能的源代码，考虑使用工具或库将代码(例如Webpack，Browserify，Gulp，Grunt等) bundle 在一起，从长远来看。

快速设置的工作示例:

您可以根据this repository在Webpack中查看工作示例的源代码。

全面披露:我制作了存储库是为了提供一个易于使用的示例，可以对其进行克隆，通过NPM安装依赖项并立即开始使用。

附加资源:

the confirm() method in the HTML Living Standard

the ES2017 Language Specification

关于javascript - 如何让sweetalert返回true/false以进行无 promise 确认？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51163281/

Sweetalert

javascript - 如何让sweetalert返回true/false以进行无 promise 确认？