javascript - 在 VueJs 中使用 Promise 控制事件流

Question

我有一个处理 HTTP 请求的 Vue 指令。我正在尝试做的是利用承诺并将 SweetAlert 挂钩到流程中。我首先启动 onRequestSubmit

    bind: function () {
        this.el.addEventListener('click', this.onRequestSubmit.bind(this));
    },

在 onRequestSubmit

    onRequestSubmit: function (e) {
        e.preventDefault();

        this.fireFlashMessage()
        .then(this.vm.$http[this.getRequestType()](this.el.getAttribute("data-delete-url"), this.aggregateData()))
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this));
    },

我希望 fireFlashMessage 在用户确认时返回 true，以便 onRequestSubmit 可以委托请求。

我的问题是：我应该将 fireFlashMessage 包装在一个 Promise 中并在调用成功返回时继续执行then吗？我对 Promises 很陌生，有点难以理解它们。

Answer 1

SweetAlert 确认窗口使用回调函数，而不是承诺。然后在该回调中，您将使用诸如

onRequestSubmit: function (e) {
    e.preventDefault();

    swal({
            title: "Are you sure?",  
            showCancelButton: true,   
            confirmButtonText: "Yes"
        }, 
        this.onRequestConfirm.bind(this)
    );
},
onRequestConfirm: function() {
    this.vm.$http[this.getRequestType()](this.el.getAttribute("data-delete-url"), this.aggregateData())
    .then(this.onComplete.bind(this))
    .catch(this.onError.bind(this));
}

编辑：this.fireFlashMessage()由于不再使用该函数而被删除，尽管如果需要，您可以再次对其进行重构