$.when().done() 中的错误响应答案

【问题标题】：Bad response in $.when().done()$.when().done() 中的错误响应
【发布时间】：2017-01-14 05:54:40
【问题描述】：

我尝试使用jquery when 的示例发送多个ajax 我遇到了问题，因为我不明白为什么我会生气。通常，当我尝试发送多个 ajax 时，响应很糟糕。

我这样做是这样的：

Workflow.prototype.ajaxWorkflowsPaymentProcessTransitionsAvailable = function (barcodes) {
        var workflow = this;
        return $.ajax({
            url: "api/v1.0/workflows/paymentProcess/transitions/available",
            type: "POST",
            data: {barcodes: barcodes},
            dataType: 'JSON'
        });
    };
Workflow.prototype.ajaxViewsDocuments = function (fd) {
        var workflow = this;
        
        return $.ajax({
            url: "api/v1.0/views/documents",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            dataType: 'JSON'
        });
    };

$.when(workflow.ajaxViewsDocuments(fd), workflow.ajaxWorkflowsPaymentProcessTransitionsAvailable(barcodes)).done(function(a1, a2){
            console.log(a1, a2);
        });

我在 console.log 中得到了这个：

但服务器响应如下：

我怎样才能获得返回服务器的相同响应？

【问题讨论】：

标签： jquery ajax promise

【解决方案1】：

jQuery ajax 返回三个结果。因此，当您对 $.when() 使用两个 ajax 调用时，传递给 $.when() 回调的每个参数都会传递两个数组，其中每个数组都包含三个用于 ajax 调用的参数。

所以，在你的代码中改变这个：

console.log(a1, a2);

到这里：

console.log(a1[0], a2[0]);

您从 jQuery ajax 调用返回的三个典型参数在 a1[0]、a1[1]、a2[2] 中传递。返回的数据参数在每个数组的[0] 元素中。您可以在文档here 中查看示例。

您可以围绕$.ajax() 创建自己的包装器，将其三个结果值缩减为一个结果值，然后$.when() 不会将它们放入数组中。

// wrapper function to make return result from $.ajax() be one single argument
$.ajax2 = function() {
    return $.ajax.apply($, arguments).then(function(result) {
        // return only single result, not all three typical arguments
        // so $.when() won't put the args in an array
        return result;
    });
};

然后，你可以这样使用它（注意从$.ajax() 到$.ajax2() 的变化）：

Workflow.prototype.ajaxWorkflowsPaymentProcessTransitionsAvailable = function (barcodes) {
    var workflow = this;
    return $.ajax2({
        url: "api/v1.0/workflows/paymentProcess/transitions/available",
        type: "POST",
        data: {barcodes: barcodes},
        dataType: 'JSON'
    });
};
Workflow.prototype.ajaxViewsDocuments = function (fd) {
    var workflow = this;

    return $.ajax2({
        url: "api/v1.0/views/documents",
        type: "POST",
        data: fd,
        processData: false,
        contentType: false,
        dataType: 'JSON'
    });
};

$.when(workflow.ajaxViewsDocuments(fd), workflow.ajaxWorkflowsPaymentProcessTransitionsAvailable(barcodes)).done(function (a1, a2) {
    console.log(a1, a2);
});

我在这里用 jQuery 1.x、2.x 和 3.x 测试了这个概念：https://jsfiddle.net/jfriend00/2mcLsw3f/

【讨论】：

我知道我可以通过你的建议得到它，但我不想通过这种方式得到它。我希望在不使用此数组的情况下获得与服务器相同的完成响应。我不想使用 a1[0] 等。
@rad11 - 这就是 jQuery Ajax 与 $.when() 一起工作的方式。我同意这是一种破碎的设计（特别是考虑到标准 ES6 的工作方式），但你不能改变它。
@rad11 - 仅供参考，您可以为$.ajax() 制作自己的包装器，如果您改为调用包装器，则可以解决此问题。
包装器看起来如何？
@rad11 - 我在答案中添加了包装器的实现。