javascript - 控制 Promise 执行顺序

Question

我在使用 promises 构建高度交互的 UI 时获得了很多乐趣。但是，我遇到了一个棘手的情况。我有一个返回执行服务器更新的 promise 的函数。我想使用后续 promise 处理程序来更新客户端模型，然后向 UI 发出更新事件。这是我的代码:

function updateServer (action) {
    return $.post(URL, { action: action })
        .fail(function (error) {
            console.log(error);
        });
}

 // An example action that might affect the server
_this.freeze = function (mode) {
    updateServer("freeze").done(function (data) {
        _this.model.data.status = data.status;
    })
    .done(function () {
        $(window).trigger(Events.UpdateUI);
    });
};

您会注意到我必须在卡住命令中发出更新事件。我更愿意在 updateServer 函数中这样做，以避免在每个控制方法中重复代码。

我找到了一种方法，将模型更新函数作为参数传递给 updateServer，但是，这似乎违反了我认为的 promise 精神:

function updateServer (action, fn) {
    return $.post(URL, { action: action })
        .done(fn)
        .done(function () {
            $(window).trigger(Events.UpdateUI);
        })
        .fail(function (error) {
            console.log(error);
        });
}

 // An example action that might affect the server
_this.freeze = function (mode) {
    updateServer("freeze", function (data) {
        _this.model.data.status = data.status;
    });
};

我认为另一种方法是设计某种具有较低优先级的完成处理程序，这样我就可以保持 promise 可堆肥性的精神。我是否遗漏了什么，或者我是否以“正确的方式”这样做？

谢谢大家!

Answer 1

我想你会想要使用一个包装你的整个 Action 的辅助函数:

function updateUIwith(result) {
    return result.then(function() {
        $(window).trigger(Events.UpdateUI);
    }).fail(function(error) {
        console.log(error);
    });
}

现在你只需要写

function updateServer(action) {
    return $.post(URL, {action: action})
}

// An example action that might affect the server
_this.freeze = function(mode) {
    updateUIwith(updateServer("freeze").then(function(data) {
        _this.model.data.status = data.status;
    }));
};