如何讓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語言規范