javascript - 如何让 sweetalert 在没有 promise 的情况下返回 true/false 以进行确认？

Question

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

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

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

有没有办法让sweetalert返回true/false，就像在JS confirm中发生的一样？

Answer 1

根据设计，SweetAlert uses Promises 用于跟踪用户如何与基于 HTML 的警报交互并且它是非阻塞的 (您仍然可以与网页/UI 交互) 与浏览器的内置 confirm() 方法相反，后者在显示模态窗口时，在对话框关闭之前阻止用户访问程序界面的其余部分。

---

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

---

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

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

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

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

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

---

- 在带有包装器的 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 是 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 等。 ) 从长远来看没有太多的努力。

---

快速设置的工作示例:

您可以查看基于 this repository 的 Webpack 中的工作示例源。

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

---

其他资源:

• the confirm() method in the HTML Living Standard
• the ES2017 Language Specification