javascript - 使用 Promise 控制 VueJ 中的事件流

Question

我有一个处理 HTTP 请求的 Vue 指令。我想做的是利用 promise 并将 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 可以委托(delegate)请求。

我的问题是:我应该将 fireFlashMessage 包装在 Promise 中，并在调用成功返回时继续使用 then 吗？我对 Promise 还很陌生，并且很难理解它们。

Answer 1

SweetAlert 确认窗口使用回调函数，而不是 promise 。然后在该回调中您将使用类似的 promise

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() 因为不再使用该函数，尽管您可以根据需要再次重构它