SweetAlertでOK、Cancelを戻り値で返したい

SweetAlertを利用してアラートを表示することは出来るようになったのですが、
OKかCancelどちらが押されたかを戻り値で返したいのですが、
毎回アラートが表示する前にreturn処理が実行されてしまいます。

javascript
1function confirmOkCancelReturn(title) {
2    var ret = 0;
3
4    swal({
5        title: TITLE_CONFIRM,
6        text: title,
7        icon: "warning",
8        buttons: {
9            cancelbutton: {
10                text: "キャンセル",
11                value: "cancel"
12            },
13            yesbutton: {
14                text: OK,
15                value: "ok"
16            }
17        }
18    }).then(function (value) {
19        switch (value) {
20            case "ok":
21                ret = 1;
22                break;
23            case "cancel":
24                break;
25        }
26    });
27
28    return ret;
29}

returnで状態を返す方法を教えて下さい。
宜しくお願いします。

Lhankor_Mhy

2020/01/10 03:29

非同期処理なので、confirmOkCancelReturnの呼び出し元が非同期じゃないと、なかなか難しいでしょうね。コールバックで処理するか、Promiseを返すか、しかないと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

SweetAlertは非同期なので、処理が終わるのを待ってからreturnしないと期待した動作にはなりません。

JavaScript
1async function confirmOkCancelReturn(title) {
2  var ret = 0;
3
4  await swal({
5    title: 'TITLE_CONFIRM',
6    text: title,
7    icon: "warning",
8    buttons: {
9      cancelbutton: {
10        text: "キャンセル",
11        value: "cancel"
12      },
13      yesbutton: {
14        text: 'OK',
15        value: "ok"
16      }
17    }
18  }).then(function(value) {
19    switch (value) {
20      case "ok":
21        ret = 1;
22        break;
23      case "cancel":
24        break;
25    }
26  });
27
28  console.log(ret); //確認用
29  return ret;
30}

動作デモ → https://jsfiddle.net/qhrdv4y9/

ただSweetAlert2を使うともっと簡単に出来るので、特別な事情がない限りこちらを使うことをオススメします。

JavaScript
1const confirm = () => {
2  let ret = 0;
3  Swal.fire({
4    title: 'title',
5    text: 'title',
6    icon: 'warning',
7    showCancelButton: true,
8  }).then(result => {
9    if(result.value) {
10      ret = 1;
11      console.log(ret) //確認用
12      return ret;
13    }
14  })
15}