如何让sweetalert返回true / false以确认没有承诺？

Question

我喜欢javascript确认的简单性，所以我可以这样做：

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

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

有没有办法让sweetalert返回true/false ，就像JS确认的那样？

Answer 1

根据设计， SweetAlert使用Promises来跟踪用户如何与基于HTML的警报进行交互，并且它是非阻塞的 （您仍然可以与网页/ UI进行交互） ，而不是浏览器的内置confirm()方法， ，当显示模态窗口时， 它会阻止用户访问程序界面的其余部分，直到关闭对话框 。

---

您不能使用相同的接口阻塞行为调用swal() ，就好像它是另一种类型的confirm() 。 但是 ，通过使用ES2017 async / await功能， 您可以以类似的方式编写代码，实际上可以实现相同的目标而不会阻止接口。

---

为了能够跨浏览器使用async / await ，使用转换器（例如Babel ）将带有ES2015 +功能的源代码转换/转换为ES5 ，这得到了广泛的支持 ：

- 在if语句中使用swal()而不包装：

你可以简单地用await来调用swal(...) ：

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

当使用SweetAlert作为真实 （ true ，当用户确认警报时）或伪造 （否则为null ）作为SweetAlert指南中描述的if语句的条件时， Promise将解决。

---

- 在if语句中使用swal() ，使用包装器类似于confirm() ：

为了熟悉confirm() ，将带有所需选项的swal(...)分离到async function ：

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

然后在带有await前缀的if语句中使用它，好像它就像一个confirm()形式，因此，它也可以按预期工作：

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

---

需要考虑的事项：

• 目前不支持在async function之外使用await 。 要解决此问题，请将代码放在事件处理程序中：

   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等） ，从长远来看，不需要太多努力。

---

快速设置的工作示例：

您可以根据Webpack查看 此存储库中工作示例的来源。

完全披露：我创建了存储库，以便提供一个易于使用的示例，可以克隆，通过NPM安装依赖项并立即开始使用。

---

其他资源：

• HTML Living Standard中的confirm()方法
• ES2017语言规范