jquery - 延迟的 jQuery AJAX 包装器

Question

我正在为 jQuery AJAX 方法创建一个包装器，因为我的 AJAX 请求在实际继续之前依赖于异步工作。

我目前正在做的是:http://pastie.org/private/bfdvep4kcdclzupsyddmiq

var ajax = function (options) {
    var deferred = $.Deferred();

    doAsyncWork()
    .done(function (attributes) {
        $.ajax(options)
        .done(function () {
            deferred.resolve.apply(this, arguments);
        })
        .fail(function () {
            deferred.reject.apply(this, arguments);
        });
    })
    .fail(function () {
        deferred.reject();
    });

    return deferred.promise();
};

ajax().readyState // undefined

它有一个返回 promise 的外部延迟。我触发 doAsyncWork() 并等待它完成，然后再实际执行 AJAX 请求。现在，虽然这可行，但问题是当其他脚本使用包装器时，因为它们无法访问 jQuery XHR 对象的属性。

有没有办法优雅地解决这个问题？

Answer 1

问题是:他们为什么要这么做？您是否尝试用包装器透明地替换 $.ajax() ？这很快就会变得复杂，因为您必须考虑 jqXHR 的所有属性和方法。 .

理论上，这样的事情是可能的，但我不会称其为优雅并且不推荐它:

var ajax = function (options) {
    var deferred = $.Deferred();
    var promise = deferred.promise();

    doAsyncWork()
    .done(function (attributes) {
        $.ajax(options)
        .done(function () {
            promise.readyState = 4
            deferred.resolve.apply(this, arguments);
        })
        .fail(function () {
            promise.readyState = 4
            deferred.reject.apply(this, arguments);
        });
    })
    .fail(function () {
        deferred.reject();
    });

    promise.readyState = 0;
    return promise;
};

其他readystate设置应该转到适当的回调(JQuery中没有onreadystatechange)。

那么，该怎么办呢？

如果其他脚本想要使用您的包装器，它们将必须使用 Deferred API。如果由于某种原因他们确实需要访问 jqXHR 对象，您可以像这样提供它:

var ajax = function (options, xhrReadyCallback) {
    var deferred = $.Deferred();

    doAsyncWork()
    .done(function (attributes) {
        var xhr = $.ajax(options)
        .done(function () {
            deferred.resolve.apply(this, arguments);
        })
        .fail(function () {
            deferred.reject.apply(this, arguments);
        });
        xhrReadyCallback(xhr);
    })
    .fail(function () {
        deferred.reject();
    });

    return deferred.promise();
};

用法:

ajax(options, function(xhr) {
    // now available:
    xhr.readyState;
});