使用 Promise 控制 VueJs 中的事件流

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 在用户确认时 return 为真，以便 onRequestSubmit 可以委托请求。

我的问题是：我是否应该将 fireFlashMessage 包装在一个 promise 中，并在调用 returns 成功时继续 then？我对 Promises 很陌生，很难理解它们。

Answer 1

SweetAlert 确认 windows 使用回调函数，而不是承诺。然后在那个回调中你会使用像

这样的承诺

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() 因为不再使用该功能，但如果需要，您可以再次重构它

使用 Promise 控制 VueJs 中的事件流

Utlizing Promise To control Event Flow in VueJs

javascript

promise

vue.js

sweetalert