带有旧回调的新 $.Deferred 对象

Question

如果这是一个愚蠢的问题，请原谅我。我已经尝试了几个小时，但我的大脑刚刚停止工作。

我有这样一个由三个 AJAX 调用组成的系统。第一次调用的服务器响应通常是 200 Success；但是第二个和第三个查询很脆弱，因为它们是图像上传，而在服务器端，我有太多的验证规则，以至于客户端的图像大多失败。

window.AjaxCall = function () {
    // to pass to $.ajax call later
    this.args = arguments;

    // xhr status
    this.status = null;

    // xhr results (jqXHR object and response)
    this.xhrResponse = {};

    this.dfr = new $.Deferred();

    // to provide an easier interface
    this.done = this.dfr.done;
    this.fail = this.dfr.fail;
    this.then = this.dfr.then;
};

AjaxCall.prototype.resetDfr = function () {
    this.dfr = new $.Deferred();
};

AjaxCall.prototype.resolve = function () {
    this.dfr.resolve(
            this.xhrResponse.result,
            this.xhrResponse.jqXHR
    );

    this.resetDfr();
};

AjaxCall.prototype.reject = function () {
    this.dfr.reject(
            this.xhrResponse.jqXHR
    );

    this.resetDfr();
};

AjaxCall.prototype.query = function () {
    var _this = this;

    // if query hasn't run yet, or didn't return success, run it again
    if (_this.status != 'OK') {
        $.ajax.apply(_this, _this.args)
                .done(function (result, textStatus, jqXHR) {
                    _this.xhrResponse.result = result;
                    _this.xhrResponse.jqXHR = jqXHR;
                    _this.resolve();
                })
                .fail(function (jqXHR) {
                    _this.xhrResponse.jqXHR = jqXHR;
                    _this.reject();
                })
                .always(function (a, b, c) {
                    var statusCode = (typeof c !== 'string'
                            ? c
                            : a).status;

                    if (statusCode == 200) {
                        _this.status = 'OK';
                    }
                });
    }

    // if query has been run successfully before, just skip to next
    else {
        _this.resolve();
    }

    return _this.dfr.promise();
};

AjaxCall 类如上所示，我连续三个调用是这样的：

var First = new AjaxCall('/'),
        Second = new AjaxCall('/asd'),
        Third = new AjaxCall('/qqq');

First.then(function () {
    console.log('#1 done');
}, function() {
    console.error('#1 fail');
});

Second.then(function () {
    console.log('#2 done');
}, function() {
    console.error('#2 fail');
});

Third.then(function () {
    console.log('#3 done');
}, function() {
    console.error('#3 fail');
});

var toRun = function () {
    First.query()
            .then(function () {
                return Second.query();
            })
            .then(function () {
                return Third.query()
            });
};

$('button').click(function () {
    toRun();
});

这些代码处于测试环境中。至于测试环境，我指的是一个简单的 HTML 页面和用于调试的基本服务器支持。

• 主页 (/) 始终返回 200 成功。
• /asd 返回 404 Not Found，前 3 次 和 200 Success 一次作为模式（即三个 404 -> 一个 200 -> 三个 404 -> 一个 200 -> 三个 404 -> ...）。
• /qqq 一直返回404 Not Found。

当我单击页面上的唯一按钮时，第一个查询返回成功，第二个查询按预期返回失败。当我第二次单击该按钮时，第一次查询跳过，因为它上次成功，第二次再次失败，也如预期的那样。

这里的问题是：

• 在我使用resetDfr 方法之前，因为dfr 已经解决或拒绝，它不再对resolve 和reject 方法作出反应。
• 当我以示例中的方式调用resetDfr 方法时，dfr 能够再次被解析或拒绝，但旧dfr 的回调没有与新的dfr 对象，我找不到将旧回调克隆到新的dfr 的方法。

你有什么建议来完成我在这里尝试做的事情？

Answer 1

Promises 表示单个值，受时间限制。您不能在概念上“重用”延迟或重置它 - 一旦它转换它就会粘住。有一些构造可以将 promise 推广到多个值（如 observables），但在这种情况下更复杂 - 每个请求只使用一个 deferred 可能会更好。

jQuery 的 AJAX已经提供了一个 Promise 接口。您的代码大多是多余的 - 您可以而且应该考虑使用现有的工具。

我们来看看$.get：

• 它已经返回了一个 Promise，因此您无需创建自己的 deferred。
• 它已经使用了浏览器缓存，除非你的服务器禁止 HTTP 缓存或浏览器拒绝它，只有在正确响应到达后才会向服务器发出一个请求（假设你没有明确地将 {cache: false} 传递给它的参数。

如果发出帖子请求，您可以使用$.post 或更一般的$.ajax 来获取任意选项。

您的代码大致如下所示：

$("button").click(function(){
    var first = $.get("/");
    var second = first.then(function(){
       return $.get("/asd");
    });
    var third = second.then(function(){
       return $.get("/qqq");
    });
});

我将它们放入变量中的原因是，您以后可以通过 first.then 等自己解开结果。也可以在单个链中执行此操作（但是如果您无法访问以前的值，则你没有明确地保存它们。

郑重声明——这根本不是一个愚蠢的问题 :)