如何让sweetalert返回true / false以进行无承诺确认？

Question

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

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

在sweetalert你有你的嵌套true一个内码then承诺的功能。

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

Answer 1

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

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

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

-swal()在if没有换行的语句中使用：

您只需简单地调用swal(...)具有await：

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

并且Promise将解决，当使用 SweetAlert 作为truthy （true当用户确认警报时）或falsy （null否则）作为SweetAlert guides 中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是目前不支持。要解决此问题，请将您的代码放在事件处理程序中：

  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 安装依赖项并立即开始使用。

其他资源：

• confirm()HTML 生活标准中的方法
• ES2017 语言规范