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

Question

I like the simplicity of javascript confirm so that I can do this:

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

in sweetalert you have to nest your true code within a then promise function.

Is there a way to have sweetalert return true/false the same way it happens in JS confirm?

Answer 1

By design, SweetAlert uses Promises to keep track of how the user interacts with the HTML-based alert and it's non-blocking (you can still interact with the webpage/UI) as opposed to the browser's built-in confirm() method, which, when displaying the modal window, it prevents the user from accessing the rest of the program's interface until the dialog box is closed .

---

You cannot call swal() with the same interface-blocking behavior, as if it were another type of confirm() . However , by using the ES2017 async / await features, you can write your code in a similar fashion and practically achieve the same goal without blocking the interface.

---

In order to be able to use async / await across browsers, use a transpiler (eg Babel ) to transpile/convert your source code with ES2015+ features to ES5 , which is widely supported :

- Using swal() in an if statement without wrapping:

You can just simply call swal(...) with await :

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

And the Promise will resolve, when using SweetAlert as truthy ( true , when the user confirms the alert) or falsy ( null otherwise) as the condition of the if statement as described in the SweetAlert guides .

---

- Using swal() in an if statement with a wrapper to resemble to confirm() :

In order to provide the familiarity of confirm() , separate swal(...) with the desired options into an async function :

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

Then use it in the if statement prefixed with await as if it were just like a form of confirm() and as such, it would also work as expected:

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

---

Things to consider:

• Using await outside of an async function is currently not supported . To get around this issue, either place your code in an event handler:

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

  or use an async IFEE or IIAFE :

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

• In order to easily transpile your source code containing ES2015+ features, consider using a tool or library to bundle your code (eg Webpack , Browserify , Gulp , Grunt , etc.) without much effort in the long run.

---

Working example with quick setup:

You can check out the sources of the working example in this repository based on Webpack .

Full disclosure: I made the repository in order to provide an easily usable example, which can be cloned, install dependencies via NPM and start using right away.

---

Additional resources:

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