javascript - 如何使用 promise ，或在函数完成之前完成 ajax 请求？

Question

我有以下功能来检查用户 session 以查看他们是否是员工。现在，我知道有更好的方法可以做到这一点，但我正在尝试制作一个与论坛软件绑定(bind)的简单应用程序。

function isStaff(callback) {
    $.ajax({
        url: url
    }).done(function(data) {
        var session = $.parseJSON(data);
        if (session.is_staff === 1) {
            callback(true);
        } else {
            callback(false);
        }

    });
}

假设我在编译“帖子”(Handlebars)时像这样使用这个函数。

function compilePost(post) {
    var source = $('#feed-item-template').html();
    var template = Handlebars.compile(source);
    var context = {
        id: post.id,
        content: post.text,
        author: post.author,
        date: $.timeago(post.date),
        staff: function() {
            isStaff(function(response) {
                return response;
            });
        }
    }
    var html= template(context);
    return html;
}

这里的问题是，检查用户是否为员工的请求直到函数运行后才完成请求。

我知道 Promises 是 async: false 的替代方法，它发出请求并在函数完成之前返回响应。

但我不知道如何将其转换为 promise 。我试图学习它，但我坚持这个概念。谁可以给我解释一下这个？谢谢。

Answer 1

首先，让我们简化compilePost函数。这个函数应该知道如何以同步方式编译帖子。让我们将 isStaff 获取更改为一个简单的参数。

function compilePost(post, isStaff) {
    var source = $('#feed-item-template').html();
    var template = Handlebars.compile(source);
    var context = {
        id: post.id,
        content: post.text,
        author: post.author,
        date: $.timeago(post.date),
        staff: isStaff
    }

    var html= template(context);
    return html;
}

现在，让我们创建一个新方法，目的只有一个——检查用户是否是员工:

function checkForStaffMemebership() {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            success: function (data) {
                var session = $.parseJSON(data);
                if (session.is_staff === 1) {
                    resolve(true);
                } else {
                    resolve(false);
                }
            }
        });
    });
}

此函数将您对服务器的原始 ajax 调用包装成一个 promise ，每当 $.ajax 调用从服务器获得响应时， promise 将通过回答用户是否是工作人员。

现在，我们可以编写另一个函数来编排该过程:

function compilePostAsync(post) {
    return checkForStaffMemebership()
        .then(function (isStaff) {
            return compilePost(post, isStaff);
        });
}

compilePostAsync 查明用户是否是工作人员。然后，它正在编译帖子。

请注意 compilePostAsync 返回一个 promise，因此如果您曾经有类似的东西:

element.innerHTML = compilePost(post);

现在，您应该将其更改为:

compilePostAsync(post).then(function (compiledPost) {
    element.innerHTML = compiledPost;
});

一些注意事项:

1. 这只是一个例子，它肯定遗漏了一些东西(例如正确的错误处理)
2. isStaff 和 checkForStaffMemebership(原始的和新的)没有任何参数，我猜你会想出如何传递 userId 或你可能的任何其他数据需要
3. 了解 promises，它是一个有用的工具，网上有很多关于它的数据，例如:MDN .